It is currently December 4th, 2020, 1:06 am

Custom Tooltip Skin

Tips and Tricks from the Rainmeter Community
User avatar
Yincognito
Posts: 2934
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Custom Tooltip Skin

Post by Yincognito »

Note: While most of the information in this post and the following ones is still accurate and relevant, the recommended custom tooltip version to implement / install is this one here.

So, the time has come for my first post in the "Tips & Tricks" section (it was about time, eh?), where I'll be writing about making a custom tooltip skin.
Yeah, you can skip the (probably longer than needed) introduction and go straight to the essentials, you naugthy one... :D
Now, for most situations, an operating system tooltip is enough, and Rainmeter provides us with sufficient options to tweak it according to our needs. However, it may come a time when one wants:
- all the visual and/or functional capabilities that a Rainmeter skin provides (e.g. fonts, alignments, fades, even short animations, histograms, etc.)
- no more "regular" flickering from the tooltip
- no more flickering due to the update rate of the OS tooltip being tied up to the parent skin's update rate (such as the flickering tooltips of animated skins)
- no more overriding the content of the meter that triggers the tooltip on hover (since the OS tooltip's top-left corner is the mouse position)
- more lines of text (wrapped or not) for the tooltip title
- more image types (or more than one image) that could be displayed as the "tooltip icon"
- no more "unexpected results" (as per the manual) when the maximum tooltip width is less than the width of the (unwrappable) tooltip title
- and the list could go on ...

For all these (justified or not) concerns and wishes, my custom tooltip skin is the solution. It's basically just another (very simple) Rainmeter skin that behaves like an OS tooltip would. It will always display within the usable screen area (actually called "work area" in Rainmeter) and its position would be adjusted to circumstances, while still displaying "aligned" to the position of its parent skin (it can be made to align to a particular meter in the parent skin though, if needed - it's a matter of adjusting the PX, PY, PW and PH variables below to the coordinates and dimensions of that particular meter). Its only disadvantage (yes, there is one) is that when another skin has its Stay Topmost activated and the custom tooltip is shown in the same area, they will both "fight to stay on top", resulting in some flickering between them - but then, this is also true regarding the OS tooltips or regular Rainmeter skins staying topmost, so nothing special. Also, not exactly a disadvantage but a practical impossibility at the moment is that it can't be displayed according to the mouse position (rather than the position of the skin or meter the mouse is hovered on) - this, unless the Rainmeter developers add the possibility to get the $MouseX$ and $MouseY$ variables not only on click or scroll, but also on hover, will continue to remain an impossible task (although maybe there could be a plugin who does just that).

Enough with the introduction, let's get to business (I'm assuming the same root config folder for these, i.e. "Custom Tooltip Skin" in the main Skins directory):

Skin.ini (the parent skin, i.e. the skin that triggers the tooltip skin - located in Custom Tooltip Skin\Skin folder)

Code: Select all

[Variables]
TS=0

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

---Measures---

[MeasureSomethingChanging]
Measure=Calc
Formula=(MeasureSomethingChanging>=9?1:MeasureSomethingChanging+1)

---Measures Tooltip---

[MeasurePopulateTooltip]
Measure=Calc
IfCondition=(#TS#=1)
IfTrueAction=[!SetOption MeterTooltipIcon ImageName "#@##CURRENTFILE#.png" "#ROOTCONFIG#\Tooltip"][!SetOption MeterTooltipTitle Text "Tooltip Title" "#ROOTCONFIG#\Tooltip"][!SetOption MeterTooltipText Text "Tooltip Content - Row 1: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 2: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 3: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 4: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 5: [MeasureSomethingChanging]" "#ROOTCONFIG#\Tooltip"][!UpdateMeterGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!Redraw "#ROOTCONFIG#\Tooltip"][!SetVariable PP 1 "#ROOTCONFIG#\Tooltip"][!SetVariable PX #CURRENTCONFIGX# "#ROOTCONFIG#\Tooltip"][!SetVariable PY #CURRENTCONFIGY# "#ROOTCONFIG#\Tooltip"][!SetVariable PW #CURRENTCONFIGWIDTH# "#ROOTCONFIG#\Tooltip"][!SetVariable PH #CURRENTCONFIGHEIGHT# "#ROOTCONFIG#\Tooltip"][!UpdateMeasureGroup TooltipGroup "#ROOTCONFIG#\Tooltip"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MeterHoverHere]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
FontWeight=700
AntiAlias=1
Text="HOVER HERE"
MouseOverAction=[!SetVariable TS 1][!WriteKeyValue "#ROOTCONFIG#\Tooltip" StartHidden 1 "#SETTINGSPATH#Rainmeter.ini"][!ActivateConfig "#ROOTCONFIG#\Tooltip"][!ZPos "2" "#ROOTCONFIG#\Tooltip"][!UpdateMeasure "MeasurePopulateTooltip"]
MouseLeaveAction=[!SetVariable TS 0][!DeactivateConfig "#ROOTCONFIG#\Tooltip"]
LeftMouseUpAction=[!SetVariable SomeIrrelevantStuffToDoHereToTriggerMouseHand 0]
DynamicVariables=1

[MeterSomethingChangingToShow]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
X=0R
MeasureName=MeasureSomethingChanging
Text="to show the custom tooltip (%1)"
DynamicVariables=1
Tooltip.ini (the tooltip skin, i.e. the skin that is used to display the tooltip - located in Custom Tooltip Skin\Tooltip folder)

Code: Select all

[Variables]
MS=24
PP=0
PX=0
PY=0
PW=0
PH=0

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

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

---Measures Rainmeter---

[MeasureMoveTooltip]
Group=TooltipGroup
Measure=Calc
UpdateDivider=-1
IfCondition=(#PP#=1)
IfTrueAction=[!Move "(((#PX#+#CURRENTCONFIGWIDTH#)>(#WORKAREAX#+#WORKAREAWIDTH#))?(#PX#-(#CURRENTCONFIGWIDTH#-#PW#)):(#PX#))" "(((#PY#+#PH#+#MS#+#CURRENTCONFIGHEIGHT#)>(#WORKAREAY#+#WORKAREAHEIGHT#))?(#PY#-#MS#-#CURRENTCONFIGHEIGHT#):(#PY#+#PH#+#MS#))"][!Show]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MeterTooltipIcon]
Group=TooltipGroup
Meter=Image
X=5
Y=5
ImageName=
UpdateDivider=-1
DynamicVariables=1

[MeterTooltipTitle]
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
X=0R
Y=0r
Text=
UpdateDivider=-1
DynamicVariables=1

[MeterTooltipText]
Group=TooltipGroup
Meter=STRING
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
X=0r
Y=0R
Text=
UpdateDivider=-1
DynamicVariables=1
Skin.ini.png (the tooltip icon, named this way for easy referencing using the built-in variables - located in Custom Tooltip Skin\@Resources folder)
Skin.ini.png
Preview (you can see a better looking version of it here)
ezgif.com-optimize.gif
How it all works
- on mouse over the 1st meter in the parent skin, the tooltip skin will be loaded hidden and staying topmost, then populated in the similarly named measure
- that measure then checks if the tooltip is loaded and proceeds to "fill" the (previously empty) options of the tooltip skin's meters, updating those meters
- the same measure then redraws the (still hidden) tooltip skin - this is needed to get the values used to position the tooltip within the usable screen area
- the measure then sets the tooltip skin's populated status and the variables holding the parent skin's position / dimensions, updating the tooltip skin measures
- meanwhile, after being set up and getting the needed variables from the parent skin, the (populated) tooltip skin moves to the correct position and shows itself

What those variables are
TS = acronym for Tooltip Status (0 = Hidden; 1 = Shown)
MS = acronym for Mouse Cursor Size (i.e. one mouse "hand cursor" away from the parent skin, in pixels)
PP = acronym for Populated (i.e. whether or not the tooltip was populated already - used to trigger tooltip movement; 0 = No; 1 = Yes)
PX = acronym for Parent X (i.e. the left coordinates of the parent skin, in pixels; can refer to any meter, if the code is further refined to do so)
PY = acronym for Parent Y (i.e. the top coordinates of the parent skin, in pixels; can refer to any meter, if the code is further refined to do so)
PW = acronym for Parent W (i.e. the width of the parent skin, in pixels; can refer to any meter, if the code is further refined to do so)
PH = acronym for Parent H (i.e. the height of the parent skin, in pixels; can refer to any meter, if the code is further refined to do so)

The base code above can obviously be modified and tweaked in endless ways. It can be changed to react to meters in the parent skin (passing the [Meter:X], [Meter:Y], [Meter:W] and [Meter:H] as PX, PY, PW and PH), it can be made into a "custom menu" that shows and hides on mouse hover (like here), it can be colored using the same colors as an OS tooltip (like here), and so on. Have fun using it, if you need more from a tooltip than usual.

Hint
1) If you have small and very close to each other skins that use either the same or different variations of this custom tooltip skin (like I do), you may notice that sometimes when you mouse hover over them in succession, the tooltip doesn't appear for the last parent skin using it. This is not a malfunction, but a perfectly logical behavior in the world of milliseconds: there isn't sufficient time to deactivate (i.e. unload) the tooltip used by the preceding parent skin and activate (i.e. load) the one used by the skin the mouse hovers on. In this case (but you can apply it in all cases, if you want), add a [!Delay N] bang (where N is a suitable number of milliseconds) after the [!SetVariable TS 1] bang from the [MeterHoverHere] equivalent in your parent skin(s), and it will solve the inconvenience.
2) For some reason, when you right click on the hovered meter that triggers the appearance of the custom tooltip skin and choose Refresh from the parent skin's context menu, the MouseLeave event doesn't occur - although it does occur for every other choice from the said context menu. As a result, the active / loaded custom tooltip skin doesn't unload / deactivate after choosing to refresh the parent skin from its context menu. This can be solved by adding OnRefreshAction=[!SetVariable TS 0][!DeactivateConfig "#ROOTCONFIG#\Tooltip"] in the parent skin's [Rainmeter] section. A harmless warning that the tooltip skin is "not active" will be generated in the log when this action happens and the tooltip isn't loaded already, but other than that, no drawback from it.

Note: Do not add padding to the tooltip "icon" in the Tooltip skin if the other meters in the skin are positioned relative to it, DynamicVariables=1 is set on the tooltip icon meter and the dimensions of the image (i.e. W, H or both, depending on how you set the relative positioning) are not explicitly set. According to this thread, there can be "unexpected behavior" when that happens. The solution for this is either add the "icon" padding to the other meters instead, "simulate" the relative positioning by absolute positioning using the icon meter's W and H, or wait for the developers to fix this issue, if they think it's feasible and doesn't interfere with other "normal" behavior in Rainmeter.
You do not have the required permissions to view the files attached to this post.
Last edited by Yincognito on April 8th, 2020, 5:44 am, edited 1 time in total.
User avatar
Beuwolf
Posts: 28
Joined: February 15th, 2020, 10:08 pm

Re: Custom Tooltip Skin

Post by Beuwolf »

Hi Yincognito,

Wanting to use tooltips to show a bit more information and in a less boring way then normal tooltips so I thought I use yours, since it is quiet customizable. But, unfortunately for me, I'm running into a small problem. Well, actually same problem when I tried to use the normal tooltip on the hard drive image I want this information to show from.

The tooltip is to give additional information about a hard drive. Since I have not tried showing these values in a tooltip before I tried until I could get it all to show when hoovering over some text in a normal tooltip, which I figured out. But when trying it over an image, or with your Custom Tool Tip, that's where I got stuck. And yes, have to be when hoovering over an image. :(

I can get it to show the Drive Label without problem (in my case; (C:) Win 10). But when trying to make it show the Drive Total/Free/Used I get a long row with numbers (Example: Total: 499423567872). In the Library it says to use Section Variables to get more control when using %1 etc, but anything I tried from there is just giving me the above numbers or 100.

It probably been staring me right in the face all this time I tried to figure it out, but would greatly appreciate any pointers how to make it to display it in GB/TB.

Thank you for any and all assistant in this little matter. :thumbup:

Edit: Just found a post from jsmorley in 2014 that helped me solve this problem I had. Link to the thread.

Which works fine, but if there is any other ways, still fell free to give a pointer if you want. :D
User avatar
Yincognito
Posts: 2934
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Custom Tooltip Skin

Post by Yincognito »

Beuwolf wrote: March 30th, 2020, 10:02 pmI can get it to show the Drive Label without problem (in my case; (C:) Win 10). But when trying to make it show the Drive Total/Free/Used I get a long row with numbers (Example: Total: 499423567872). In the Library it says to use Section Variables to get more control when using %1 etc, but anything I tried from there is just giving me the above numbers or 100.

It probably been staring me right in the face all this time I tried to figure it out, but would greatly appreciate any pointers how to make it to display it in GB/TB.

Thank you for any and all assistant in this little matter. :thumbup:
Check the AutoScale option for String meters (or its "manual" version, Scale). These will get you want you want for meters.

In the case of tooltips, you should read this note from the manual. I basically says that the scale option is forced to a certain value in tooltips, so if you need more flexibility in this case, you could use the Scale parameter of a section variable.

Some examples:
Scale for String meters (this one, for example, divides the linked measure value to get the GB):

Code: Select all

[SomeMeter]
Meter=String
...
Scale=(1024**3)
AutoScale for String meters (this one autoscales to kb, MB, GB, etc.):

Code: Select all

[SomeMeter]
Meter=String
...
AutoScale=1k
Scale parameter for a section variable (this one, for example, scales a measure value to GB):

Code: Select all

[SomeMeter]
Meter=Whatever
...
ToolTipText="[SomeMeasure:/1073741824]"
As you can see, it's not a complete flexibility in the case of standard tooltips (my custom tooltips, being actual skins, don't suffer from this issue, obviously), since there isn't a way to "autoscale" a measure value in tooltips, only scale to a "fixed", hardcoded value (e.g. GB in the above example). This means that while you can choose whatever scale you want (e.g. kB, MB, TB, etc.), that won't be able to "fluctuate" (say, between kB and MB, depending on how big is the number value of the measure).

That being said, I have a way of "autoscaling" in tooltips, but it's a bit more complicated (not by itself, but the math a little). I actually wanted to post it in the Tips & Tricks a long time ago, but postponed it indefinitely as it only works up to a certain decimal precision, due to how Rainmeter stores a measure's string value. Although the maximum decimal for which this works is totally reasonable (I believe it's 3 or 4 digits after the .), the perfectionist in me is still not entirely happy with it. That doesn't stop me from using it for years in my skins without any issue though (and still keep using in my custom tooltips, despite the fact that I can technically do without it)... :D

I'll try to simplify a sample for you. Assuming [SomeMeasure] is your "raw number" measure that you want it to autoscale, you'd have to create another [IntermediaryMeasure] (names are changeable, of course), then use this latter measure in your tooltips:

Code: Select all

[IntermediaryMeasure]
Measure=Calc
Formula=Round(SomeMeasure/#Scale#**((SomeMeasure<=1?1:Ceil(Log(SomeMeasure)/Log(#Scale#)))-1),#Decimals#)+(SomeMeasure<=1?1:Ceil(Log(SomeMeasure)/Log(#Scale#)))*(1/(10**(#Decimals#+2)))
RegExpSubstitute=1
Substitute="^(.*\..{#Decimals#}).{1}(.{1}).*$":"\1\2","1$":"  ","2$":" k","3$":" M","4$":" G","5$":" T","6$":" P","7$":" E","8$":" Z","9$":" Y"
DynamicVariables=1
So you'll have ToolTipText="[IntermediaryMeasure]" in the desired meter (don't forget to add DynamicVariables=1 to it, since it uses ever-changing section variables). #Scale# and #Decimals# are variables holding the auto-scale value (e.g. 1024, 1000, etc.) and the decimal precision (i.e. the number of decimals after the .), respectively - but you can replace them with the actual values, if you like.

P.S. The base of the math for the formula above is the fact that Log(N)/Log(10) means to what power you need to get 10 to obtain N. Applying this to 1024 basically does the job, the only thing still missing is adding the k,M,G, etc. suffixes after the number (or before the B for the bytes). This is solved by adding another decimal at the end of the number that is then converted to the right suffix in the Substitute.

EDIT: Just saw your edit. Yes, jsmorley's solution is ok, but it works only for the number of suffixes he writes an IfCondition for. Mine is a bit more general. But given your level in Rainmeter code, I would recommend you use the simpler jsmorley solution, indeed. And standard tooltips for the moment. ;-)
User avatar
Beuwolf
Posts: 28
Joined: February 15th, 2020, 10:08 pm

Re: Custom Tooltip Skin

Post by Beuwolf »

Yincognito wrote: March 30th, 2020, 11:36 pm Check the AutoScale option for String meters (or its "manual" version, Scale). These will get you want you want for meters.

In the case of tooltips, you should read this note from the manual. I basically says that the scale option is forced to a certain value in tooltips, so if you need more flexibility in this case, you could use the Scale parameter of a section variable.

Some examples:
Scale for String meters (this one, for example, divides the linked measure value to get the GB):

Code: Select all

[SomeMeter]
Meter=String
...
Scale=(1024**3)
AutoScale for String meters (this one autoscales to kb, MB, GB, etc.):

Code: Select all

[SomeMeter]
Meter=String
...
AutoScale=1k
Scale parameter for a section variable (this one, for example, scales a measure value to GB):

Code: Select all

[SomeMeter]
Meter=Whatever
...
ToolTipText="[SomeMeasure:/1073741824]"
As you can see, it's not a complete flexibility in the case of standard tooltips (my custom tooltips, being actual skins, don't suffer from this issue, obviously), since there isn't a way to "autoscale" a measure value in tooltips, only scale to a "fixed", hardcoded value (e.g. GB in the above example). This means that while you can choose whatever scale you want (e.g. kB, MB, TB, etc.), that won't be able to "fluctuate" (say, between kB and MB, depending on how big is the number value of the measure).
Yeah, I did the above when learning how to display the tooltip over some text.

Image

Which worked fine, as long as it was under the Meter=String tag, but when trying it underneath your Custom Tooltip Tips it didn't work, which I think is due to it is under Measure=Calc tag ? In anycase, I didn't get it to work, as in my first post, just got a long string with numbers. I did however get it to work on my image under Meter=Image, so there is that. :thumbup:
Yincognito wrote: March 30th, 2020, 11:36 pm That being said, I have a way of "autoscaling" in tooltips, but it's a bit more complicated (not by itself, but the math a little). I actually wanted to post it in the Tips & Tricks a long time ago, but postponed it indefinitely as it only works up to a certain decimal precision, due to how Rainmeter stores a measure's string value. Although the maximum decimal for which this works is totally reasonable (I believe it's 3 or 4 digits after the .), the perfectionist in me is still not entirely happy with it. That doesn't stop me from using it for years in my skins without any issue though (and still keep using in my custom tooltips, despite the fact that I can technically do without it)... :D

I'll try to simplify a sample for you. Assuming [SomeMeasure] is your "raw number" measure that you want it to autoscale, you'd have to create another [IntermediaryMeasure] (names are changeable, of course), then use this latter measure in your tooltips:

Code: Select all

[IntermediaryMeasure]
Measure=Calc
Formula=Round(SomeMeasure/#Scale#**((SomeMeasure<=1?1:Ceil(Log(SomeMeasure)/Log(#Scale#)))-1),#Decimals#)+(SomeMeasure<=1?1:Ceil(Log(SomeMeasure)/Log(#Scale#)))*(1/(10**(#Decimals#+2)))
RegExpSubstitute=1
Substitute="^(.*\..{#Decimals#}).{1}(.{1}).*$":"\1\2","1$":"  ","2$":" k","3$":" M","4$":" G","5$":" T","6$":" P","7$":" E","8$":" Z","9$":" Y"
DynamicVariables=1
So you'll have ToolTipText="[IntermediaryMeasure]" in the desired meter (don't forget to add DynamicVariables=1 to it, since it uses ever-changing section variables). #Scale# and #Decimals# are variables holding the auto-scale value (e.g. 1024, 1000, etc.) and the decimal precision (i.e. the number of decimals after the .), respectively - but you can replace them with the actual values, if you like.

P.S. The base of the math for the formula above is the fact that Log(N)/Log(10) means to what power you need to get 10 to obtain N. Applying this to 1024 basically does the job, the only thing still missing is adding the k,M,G, etc. suffixes after the number (or before the B for the bytes). This is solved by adding another decimal at the end of the number that is then converted to the right suffix in the Substitute.
Ahem, yeah I saw the above formula in another thread and it way to complicated for me to understand at the moment ! :oops: Was actually in a thread where jsmorley posted his tooltip version, which he used LUA Scripting to make the tooltip look all nice and neat. Another variation of the tooltip that's a bit out of my league at the moment. :oops:
Yincognito wrote: March 30th, 2020, 11:36 pm EDIT: Just saw your edit. Yes, jsmorley's solution is ok, but it works only for the number of suffixes he writes an IfCondition for. Mine is a bit more general. But given your level in Rainmeter code, I would recommend you use the simpler jsmorley solution, indeed. And standard tooltips for the moment. ;-)
Whops, didn't realize last night that that link went to his second suggestion in that thread, it was meant for his first suggestion 2 posts above it. The below code is what he showed there and what I was referring to. It's simple enough for me to get my ancient head around and make it work ! :p

Code: Select all

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

[Metadata]
Name=EmptyRecBin

[Variables]
Scale=1048576
ScalePostfix=M
Decimals=2

[measureBinItems]
; This measure returns the amount of items in the Recycle Bin.
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=COUNT
UpdateDivider=3

[measureBinSize]
; This measure returns the amount of items in the Recycle Bin.
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=SIZE
UpdateDivider=3

[MeterEmpty]
Meter=Button
ButtonImage=ButtonBitmap.png
ButtonCommand=[!CommandMeasure measureBinItems "EmptyBin"]
ToolTipType=1
ToolTipText=[measureBinItems] element(s), [measureBinSize:/#Scale#, #Decimals#] #ScalePostfix#B
MouseOverAction=[!SetOption MeterText Text "Mouse OVER state"][!UpdateMeter MeterText][!Redraw]
DynamicVariables=1

But, although I got your Custom Tooltip to show the hard drive information as can be seen below (using jsmorley's code above):

Image

I have not been able to figure out how to put into my skin and make it work when hoovering over the image. Well, it will be images since it is for all my hard drives in the end. But your advice above made it work, as did the simpler version of jsmorley's code, so i be using those to make it work for me. Wont be as fancy as your Custom Tooltip though, but it have to do until I get some more experience underneath my baby wings. :lol:

Greatly appreciated your help once again ! :thumbup:
User avatar
balala
Rainmeter Sage
Posts: 11858
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Custom Tooltip Skin

Post by balala »

Beuwolf wrote: March 31st, 2020, 10:03 am but when trying it underneath your Custom Tooltip Tips it didn't work, which I think is due to it is under Measure=Calc tag ?
Tooltips can't be used on measures (nor on Calc, nor on other type of measures), just on meters. Tooltip is a meter related option:
Creates a tooltip which appears when the mouse is hovered over the meter.
User avatar
Yincognito
Posts: 2934
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Custom Tooltip Skin

Post by Yincognito »

Beuwolf wrote: March 31st, 2020, 10:03 amWhich worked fine, as long as it was under the Meter=String tag, but when trying it underneath your Custom Tooltip Tips it didn't work, which I think is due to it is under Measure=Calc tag ? In anycase, I didn't get it to work, as in my first post, just got a long string with numbers.
Balala is absolutely correct on this one - tooltips cannot be used on measures, only on meters.
Beuwolf wrote: March 31st, 2020, 10:03 amWhops, didn't realize last night that that link went to his second suggestion in that thread, it was meant for his first suggestion 2 posts above it. The below code is what he showed there and what I was referring to. It's simple enough for me to get my ancient head around and make it work ! :p
Yes, but if you look closely, that's exactly the Scale parameter for a section variable I also recommended above.
Beuwolf wrote: March 31st, 2020, 10:03 amBut, although I got your Custom Tooltip to show the hard drive information as can be seen below (using jsmorley's code above), I have not been able to figure out how to put into my skin and make it work when hoovering over the image. Well, it will be images since it is for all my hard drives in the end. But your advice above made it work, as did the simpler version of jsmorley's code, so i be using those to make it work for me. Wont be as fancy as your Custom Tooltip though, but it have to do until I get some more experience underneath my baby wings. :lol:
It's easy to make my custom tooltips work under the image - it's just as easy as for standard tooltips: you cut and paste the MouseOverAction and the MouseLeaveAction from the text meter to the image meter:

Skin.ini (the parent skin):

Code: Select all

[Variables]
TS=0

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

---Measures---

[MeasureSomethingChanging]
Measure=Calc
Formula=(MeasureSomethingChanging>=9?1:MeasureSomethingChanging+1)

---Measures Tooltip---

[MeasurePopulateTooltip]
Measure=Calc
IfCondition=(#TS#=1)
IfTrueAction=[!SetOption MeterTooltipIcon ImageName "#@##CURRENTFILE#.png" "#ROOTCONFIG#\Tooltip"][!SetOption MeterTooltipTitle Text "Tooltip Title" "#ROOTCONFIG#\Tooltip"][!SetOption MeterTooltipText Text "Tooltip Content - Row 1: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 2: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 3: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 4: [MeasureSomethingChanging]#CRLF#Tooltip Content - Row 5: [MeasureSomethingChanging]" "#ROOTCONFIG#\Tooltip"][!UpdateMeterGroup TooltipGroup "#ROOTCONFIG#\Tooltip"][!Redraw "#ROOTCONFIG#\Tooltip"][!SetVariable PP 1 "#ROOTCONFIG#\Tooltip"][!SetVariable PX #CURRENTCONFIGX# "#ROOTCONFIG#\Tooltip"][!SetVariable PY #CURRENTCONFIGY# "#ROOTCONFIG#\Tooltip"][!SetVariable PW #CURRENTCONFIGWIDTH# "#ROOTCONFIG#\Tooltip"][!SetVariable PH #CURRENTCONFIGHEIGHT# "#ROOTCONFIG#\Tooltip"][!UpdateMeasureGroup TooltipGroup "#ROOTCONFIG#\Tooltip"]
IfConditionMode=1
DynamicVariables=1

---Meters---

[MeterHoverHere]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
FontWeight=700
AntiAlias=1
Text="HOVER IMAGE BELOW"
DynamicVariables=1

[MeterSomethingChangingToShow]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
X=0R
Y=0r
MeasureName=MeasureSomethingChanging
Text="to show the custom tooltip (%1)"
DynamicVariables=1

[MeterImage]
Meter=Image
X=([MeterHoverHere:W]/2)
Y=0R
ImageName="#@##CURRENTFILE#.png"
UpdateDivider=-1
MouseOverAction=[!SetVariable TS 1][!WriteKeyValue "#ROOTCONFIG#\Tooltip" StartHidden 1 "#SETTINGSPATH#Rainmeter.ini"][!ActivateConfig "#ROOTCONFIG#\Tooltip"][!ZPos "2" "#ROOTCONFIG#\Tooltip"][!UpdateMeasure "MeasurePopulateTooltip"]
MouseLeaveAction=[!SetVariable TS 0][!DeactivateConfig "#ROOTCONFIG#\Tooltip"]
LeftMouseUpAction=[!SetVariable SomeIrrelevantStuffToDoHereToTriggerMouseHand 0]
DynamicVariables=1
Preview
Image Tooltip.jpg
That being said, I should post someday the "meter version" of my Custom Tooltip. I already use it and it works exactly the same, the difference is that it displays under the hovered meter instead of under the hovered skin. The only thing I needed to do to "convert" it to a meter based tooltip was to transform the TS (i.e. tooltip status) variable into a numerical ID of the hovered meter (I called the "revamped" variable PI, aka parent ID - no connection to the mathematical PI), and add another (string) variable holding the name of the meter (called PM, aka parent meter), which I then can use it like a section variable (e.g. [#PM#:X], [#PM#:Y], etc.) to get the position under which to display the custom tooltip. Although ... I'm not sure yet whether to rewrite my initial post to provide this version (since the initial version will probably become obsolete compared to this one), or add it as a "self reply" at the end...
You do not have the required permissions to view the files attached to this post.
ms310
Posts: 226
Joined: April 1st, 2015, 7:16 am

Re: Custom Tooltip Skin

Post by ms310 »

Could you please upload a skin - maybe one of your examples - so I can tear it apart more easily :Whistle :D
User avatar
Yincognito
Posts: 2934
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Custom Tooltip Skin

Post by Yincognito »

ms310 wrote: April 8th, 2020, 3:36 am Could you please upload a skin - maybe one of your examples - so I can tear it apart more easily :Whistle :D
Just a moment, I'll add some comments for a better understanding. I'll post the "meter version" of my custom tooltips, and I'll edit my initial post to point to this version, as it's a bit improved and also the tooltip position is under the hovered meter instead of the hovered skin, which means the tooltip can have as many positions as there are meters in the parent skin for which the corresponding MouseOverAction / MouseLeaveAction have been added.
User avatar
Yincognito
Posts: 2934
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Custom Tooltip Skin

Post by Yincognito »

This is the "meter version" of custom tooltips. It is recommended to be used instead of the version from my initial post - it's slightly better and has more features. Comments regarding the elements in the skins are included.
Custom Tooltip Skin 2.0.0.rmskin
You do not have the required permissions to view the files attached to this post.
ms310
Posts: 226
Joined: April 1st, 2015, 7:16 am

Re: Custom Tooltip Skin

Post by ms310 »

Yincognito wrote: April 8th, 2020, 5:34 am This is the "meter version" of custom tooltips. It is recommended to be used instead of the version from my initial post - it's slightly better and has more features. Comments regarding the elements in the skins are included.
Custom Tooltip Skin 2.0.0.rmskin
Thank you so much!