Custom tooltip skin

[Yincognito]

Note: The "final product" of the attempts below has been moved to the "Tips & Tricks" section of the forum, to (hopefully) help others as well.

This is my (relatively successful) attempt of a basic custom tooltip skin:

Custom Tooltip Skin_1.0.rmskin

There are basically 2 .ini files, the "parent" skin and the tooltip skin:

Skin.ini:

Code: Select all

[Variables]
TooltipStatus=0

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures Tooltip---

[MS_Rainmeter_PopulateTooltip]
Measure=Calc
IfCondition=(#TooltipStatus#=1)
IfTrueAction=[!SetOption MT_Rainmeter_TooltipTitle Text "Tooltip Title" "#ROOTCONFIG#\Tooltip"][!SetOption MT_Rainmeter_TooltipText Text "Tooltip Content - Row 1#CRLF#Tooltip Content - Row 2#CRLF#Tooltip Content - Row 3#CRLF#Tooltip Content - Row 4#CRLF#Tooltip Content - Row 5" "#ROOTCONFIG#\Tooltip"][!UpdateMeterGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!UpdateMeasureGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!SetTransparency "255" "#ROOTCONFIG#\Tooltip"][!Redraw "#ROOTCONFIG#\Tooltip"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MT_Rainmeter_Hover]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text="Hover To Show The Custom Tooltip"
MouseOverAction=[!SetVariable TooltipStatus 1][!WriteKeyValue Variables ParentX #CURRENTCONFIGX# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentY #CURRENTCONFIGY# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentWidth #CURRENTCONFIGWIDTH# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentHeight #CURRENTCONFIGHEIGHT# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!ActivateConfig "#ROOTCONFIG#\Tooltip"][!ZPos "2" "#ROOTCONFIG#\Tooltip"][!UpdateMeasure "MS_Rainmeter_PopulateTooltip"]
MouseLeaveAction=[!SetVariable TooltipStatus 0][!SetTransparency "0" "#ROOTCONFIG#\Tooltip"][!DeactivateConfig "#ROOTCONFIG#\Tooltip"]
DynamicVariables=1

Tooltip.ini:

Code: Select all

[Variables]
ParentX=1063
ParentY=166
ParentWidth=245
ParentHeight=26
MouseCursorSize=24

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

BackgroundMode=2
SolidColor=47,47,47,255

---Measures Rainmeter---

[MS_Rainmeter_MoveTooltip]
Group=TooltipGroup
Measure=Calc
UpdateDivider=-1
IfCondition=(#CURRENTCONFIGWIDTH#>10)
IfTrueAction=[!Move "(((#ParentX#+#CURRENTCONFIGWIDTH#)>(#WORKAREAX#+#WORKAREAWIDTH#))?(#ParentX#-(#CURRENTCONFIGWIDTH#-#ParentWidth#)):(#ParentX#))" "(((#ParentY#+#ParentHeight#+#MouseCursorSize#+#CURRENTCONFIGHEIGHT#)>(#WORKAREAY#+#WORKAREAHEIGHT#))?(#ParentY#-#MouseCursorSize#-#CURRENTCONFIGHEIGHT#):(#ParentY#+#ParentHeight#+#MouseCursorSize#))"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MT_Rainmeter_TooltipTitle]
Group=TooltipGroup
Meter=STRING
FontFace=Consolas
StringStyle=Bold
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=
UpdateDivider=-1

[MT_Rainmeter_TooltipText]
Group=TooltipGroup
Meter=STRING
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=
UpdateDivider=-1

Now, while making a custom tooltip skin whose dimensions are already known (i.e. no DynamicWindowSize=1) is much easier (no need to hide or set the tooltip skin transparency, the tooltip dimensions written to the tooltip skin instead of the parent's and the tooltip skin's move being triggered from the parent skin), making a dynamically sized custom tooltip skin is trickier. In this case, the tooltip dimensions are not known, and the tooltip needs to be drawn first in order to get its dimensions, so that it can be moved within the WORKAREA limits accordingly.

The problem I'm having here is that, since there is no easy way of "activating the config" in a hidden state from the start, the tooltip skin can sometimes be seen drawn in an incorrect position (when the parent skin is close to the screen edges) - until the move bang does its job and corrects the position to one that is within the screen, that is. I tried hiding it right after "activating" it or setting its transparency to 0 immediately, but there are still sometimes some milliseconds when it is visible in the "wrong" position.

How can I make the tooltip skin "invisible" until its move has been completed successfully? I want it to be shown only after its position has been corrected. Thanks!

NOTE: If you're wondering why I didn't just make two meters that show and hide themselves and put the tooltip data in them, that's an obvious reason: while the meters can be easily moved beyond the parent's width and height, they can't be moved below the (0,0) point without truncating them, since apparently DynamicWindowSize=1 is only increasing the skin dimensions when the direction of the enlargment is positive (to the right/bottom), not negative (to the left/top). Plus, I can't set the ZPos=2 (i.e. stay topmost) on meters, only on skins.

[balala]

You can try to add the following option to the [Rainmeter] section of Tooltip.ini: OnRefreshAction=[!Hide][!Delay "500"][!ShowFade]. This option hides the current skin when loaded (refreshed), waits half a second, then shows it with a fade effect. You have to find a good delay value, I added 500, but a better value could exist. Experiment a bit to find it, in a way to not have a too long delay.
Definitely this isn't the best method. There might be other as well.

[Yincognito]

You can try to add the following option to the [Rainmeter] section of Tooltip.ini: OnRefreshAction=[!Hide][!Delay "500"][!ShowFade]. This option hides the current skin when loaded (refreshed), waits half a second, then shows it with a fade effect. You have to find a good delay value, I added 500, but a better value could exist. Experiment a bit to find it, in a way to not have a too long delay.
Definitely this isn't the best method. There might be other as well.

Thanks for the idea, 2000 is the minimum value for this to work in my case, but you're right, it's not perfect. I've also tried setting a Transparency=0 tooltip variable that's used to draw the meters, then changing it to 255 and !Redraw - it worked fine (no tooltip drawn in the wrong position), but, just like your method, there's still a delay in showing the correctly positioned tooltip skin.

Plus, while my method doesn't need adjustements like tweaking the delay, one disadvantage is that, since the changed variable requires setting DynamicVariables=1, it can't be used in the [Rainmeter] section (so, background will have to be drawn outside that section).

[balala]

Thanks for the idea, 2000 is the minimum value for this to work in my case, but you're right, it's not perfect.

2000? Too much. I'd be tempted to say one update period (1000) would be enough. It should have to be, because after a such time, the skin gets update. But maybe there is something I didn't observe?

[Yincognito]

2000? Too much. I'd be tempted to say one update period (1000) would be enough. It should have to be, because after a such time, the skin gets update. But maybe there is something I didn't observe?

I don't know - I was surprised by the large value as well. I also have my actual skins active, so they could slightly influence the value, but certainly not by that much. By the way, it takes about the same time to show the tooltip using my method. Interesting, right?

[Yincognito]

I discovered this is faster:

Skin.ini:

Code: Select all

[Variables]
TooltipStatus=0

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures Tooltip---

[MS_Rainmeter_PopulateTooltip]
Measure=Calc
IfCondition=(#TooltipStatus#=1)
IfTrueAction=[!SetOption MT_Rainmeter_TooltipTitle Text "Tooltip Title" "#ROOTCONFIG#\Tooltip"][!SetOption MT_Rainmeter_TooltipText Text "Tooltip Content - Row 1#CRLF#Tooltip Content - Row 2#CRLF#Tooltip Content - Row 3#CRLF#Tooltip Content - Row 4#CRLF#Tooltip Content - Row 5" "#ROOTCONFIG#\Tooltip"][!UpdateMeterGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!UpdateMeasureGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!Redraw "#ROOTCONFIG#\Tooltip"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MT_Rainmeter_Hover]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text="Hover To Show The Custom Tooltip"
MouseOverAction=[!SetVariable TooltipStatus 1][!WriteKeyValue Variables ParentX #CURRENTCONFIGX# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentY #CURRENTCONFIGY# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentWidth #CURRENTCONFIGWIDTH# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!WriteKeyValue Variables ParentHeight #CURRENTCONFIGHEIGHT# "#ROOTCONFIGPATH#Tooltip\Tooltip.ini"][!ActivateConfig "#ROOTCONFIG#\Tooltip"][!ZPos "2" "#ROOTCONFIG#\Tooltip"][!Move "99999" "99999" "#ROOTCONFIG#\Tooltip"][!UpdateMeasure "MS_Rainmeter_PopulateTooltip"]
MouseLeaveAction=[!SetVariable TooltipStatus 0][!DeactivateConfig "#ROOTCONFIG#\Tooltip"]
DynamicVariables=1

Tooltip.ini:

Code: Select all

[Variables]
ParentX=604
ParentY=232
ParentWidth=245
ParentHeight=26
MouseCursorSize=24

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

BackgroundMode=2
SolidColor=47,47,47,255

---Measures Rainmeter---

[MS_Rainmeter_MoveTooltip]
Group=TooltipGroup
Measure=Calc
UpdateDivider=-1
IfCondition=(#CURRENTCONFIGWIDTH#>10)
IfTrueAction=[!Move "(((#ParentX#+#CURRENTCONFIGWIDTH#)>(#WORKAREAX#+#WORKAREAWIDTH#))?(#ParentX#-(#CURRENTCONFIGWIDTH#-#ParentWidth#)):(#ParentX#))" "(((#ParentY#+#ParentHeight#+#MouseCursorSize#+#CURRENTCONFIGHEIGHT#)>(#WORKAREAY#+#WORKAREAHEIGHT#))?(#ParentY#-#MouseCursorSize#-#CURRENTCONFIGHEIGHT#):(#ParentY#+#ParentHeight#+#MouseCursorSize#))"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MT_Rainmeter_TooltipTitle]
Group=TooltipGroup
Meter=STRING
FontFace=Consolas
StringStyle=Bold
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=
UpdateDivider=-1
DynamicVariables=1

[MT_Rainmeter_TooltipText]
Group=TooltipGroup
Meter=STRING
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=
UpdateDivider=-1
DynamicVariables=1

This basically attempts to move the tooltip to the (9999,9999) point (sort of trying to make it "invisible" by moving it "outside" the screen) at the start, before moving it in the correct position. The first move is done within the parent skin, thus being much faster.

Unfortunately, it seems Rainmeter restricts skins to the visible screen area, since even after this, a small part of the tooltip skin is still shown for a couple of milliseconds at the bottom-right corner of the screen...

[eclectic-tech]

You might be interested in InformMe by Faradey that demos several alternative ways to popup information: custom tooltips. toasts, etc.

BTW, with the delay proposed by balala, your process works for me.

[Yincognito]

You might be interested in InformMe by Faradey that demos several alternative ways to popup information: custom tooltips. toasts, etc.

Thanks for the info, eclectic-tech - that's indeed a very interesting addon, especially the way it can use the "new" Windows 10 notification system in TrayTip. There are, however, two things that won't make this as appealing as it could have been for me:

- it uses an addon to accomplish things. I try to minimize external dependencies, for example I use only one "unofficial" plugin, the MSI Afterburner one, and that is only because it is critical in showing temperatures and stuff like that
- it can't right align the text, as far as I can see. This is the very reason I'm trying to develop a custom tooltip skin as an alternative to classic tooltip system, since you can right align things in a Rainmeter skin (even in a DynamicWindowSize=1 one, once you know its dimensions). As of now, I simulate right alignement in the classic tooltip variant by adding combinations of normal space (U+0020) and "six-per-em" spaces (U+2006) in front of the text that I want to align, but that requires knowing every possible value (or the width extent of the value) I'm looking to right align. As you can see below, this works quite well (I'm also taking advantage of the fact that the digits in the Segoe UI default Windows tooltip font are exactly two times the width of a "normal" U+0020 space):

Weather - Classic Tooltip.jpg

The Last Updated and Location lines at the bottom are obviously not right aligned (or "justified"), since their values could take a lot of different forms, making it impossible to estimate their width. That is acceptable though, since the vast majority of the other lines (including the Coordinates one) are aligned, creating the impression of an ordered "justified" text that spans the whole width of the tooltip.

BTW, with the delay proposed by balala, your process works for me.

I'm sure it does. For me it doesn't, and I can't figure out why, but then, it's not that critical, after all. In the end, I would prefer not to use hardcoded delays, as the requirements from those may vary according to how busy is the CPU with other tasks - for example, things would take longer at startup, compared to doing stuff in the "normal usage" mode afterwards. The best thing would be for the tooltip to show right after the move has been completed (no matter how long it takes), without depending on a hardcoded value that might be insufficient in some cases.

[eclectic-tech]

Thanks for the info, eclectic-tech - that's indeed a very interesting addon, especially the way it can use the "new" Windows 10 notification system in TrayTip. There are, however, two things that won't make this as appealing as it could have been for me: ...

Just thought I would make you aware of alternatives to customize the default tooltip style.

Yes, it may use an add on, but you are limiting yourself to specific spaced fonts, so there can be drawbacks either way.

Everyone has their own taste and style, which is great! Your screenshot looks promising; looking forward to seeing how far you can take it!

[Yincognito]

Just thought I would make you aware of alternatives to customize the default tooltip style.

Yes, it may use an add on, but you are limiting yourself to specific spaced fonts, so there can be drawbacks either way.

Everyone has their own taste and style, which is great! Your screenshot looks promising; looking forward to seeing how far you can take it!

Yes, and I thank you for letting me know the alternatives. Limiting myself to a specific spaced font is generally bad, but since I got the tricks to achieve what I wanted for this font, it turned out to be positive, after all. As long as Windows doesn't change its default tooltip font (which is unlikely in the near and medium future, considering that it's their own typeface and history shown that good years have to pass for them to change the font used in tooltips), I'm safe. I've encountered some problems when testing this in Windows 7 - since they changed the kerning/spacing for some characters over the years - but thankfully, aside from the capital letter 'T' (which was wider in Windows 7 compared to Windows 10), most of those changes were for Unicode characters that are used mainly in Segoe UI Symbol font, so, as long as I'm not using those characters in places critical to text alignement, everything should be fine across Windows / Segoe UI / Unicode versions.

That being said, the skins are mostly completed (i.e. largely rewritten since a couple of years ago), aside from some nitpicking in RegEx substitutions in my Weather skin (that I could do just fine without "correcting" them, hence the nitpicking description), so they could be released even now. They won't make waves though, since they use a minimalistic look, but they do use some tricks and custom stuff underneath the "surface" in order for things to have the desired form.