Learning DX Step-By-Step - #8

Tool-Tip Replacement

By on April 30, 2007 2:15:35 PM from WinCustomize Forums WinCustomize Forums

RomanDA

Join Date 12/2003
+147
Step-by-Step Tutorials

#8 - Tool-Tip Replacement

A series by RomanDA

Listing of other DX Tutorials: Click here
Today's Lesson: "Tool-Tip Replacement"

In this lesson we will make a replacement for the built in Tool-tip, one that can be made any color, shadow, transparency, and have it re-size automatically.

This is not going to be a simple STEP-BY-STEP, I'm assuming if you are this advanced into DX, I don't need to explain how to get the script windows up, or edit properties!  This is more like a SCRIPT example, not a step-by-step.

For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.

Lets get started.

STEP 1 - Create a simple graphic bg to use.

I made a very simple rounded corner background item to use for the tool-tip background.

  • The reason for the RED is because that's the best color to use for changing hue's
  • Rounded corners (just cause)
  • black frame cause I liked it.
  • You can make yours anyway you want.

STEP 2 - Create the ToolTipBack


Create a new object (see previous tutorials).
  • Select the tool-tip-back.png from above.
  • You will need to set the "ADVANCED" properties on the object so it can be re-sized easily.
  • Click on the "summary" tab and name this object "ToolTip_Back"
  • Make this part of the GROUP "ToolTip"

 

STEP 3 - Add the ToolTip_Text to the ToolTip_Back


Create a TEXT object, place it inside the ToolTip_Back object, position might change, on mine its 6/8.
  • Make the text about 10px Arial black, or whatever color you want.
  • Call it ToolTip_Text
  • Make the Parent/Owner  ToolTip_Back
  • make the Group ToolTip
  • for this example change the left/top to 5 & 5

STEP 4 - Making a test object for the tip.


The idea of this tutorial is to have a new-look tool-tip that would replace the built-in one.  So, we need something to mouse over to see this tool-tip.

We need to make something, anything to mouse over.  You can use the "default" object since we dont really care what it looks like.

  • Make a NEW OBJECT, call it TEST_OBJECT.
  • use any image you want, or just the built-in default image.
    (this is what I will show here)
  • We need to add a script to this object.
Vbscript  Code
  Sub Object_OnMouseEnter
  Call ShowToolTip("This is my Tool-Tip")
End Sub

Sub Object_OnMouseLeave
Call HideToolTip()
End Sub

STEP 5 - Adding the code for the Tool-tip

Add the following code to the above TEST object.  Put it at the bottom of the code, under the OnMouseLeave sub section.

I will try and explain some of the code below. (look for the yellow info)

Vbscript  Code
  Function ShowToolTip(TextToShow)
  desktopx.Object("ToolTip_Text").text = TextToShow 'The Text you passed to the function

'--- Set the height/width of the ToolTip_Back object (the +10 +20 are used to give the text box some padding around the text.
  desktopx.Object("ToolTip_Back").height = desktopx.Object("ToolTip_Text").height + 10
  desktopx.Object("ToolTip_Back").width = desktopx.Object("ToolTip_Text").width + 20

'--- We need to position the tool-tip above the object you are mouseing over.
'--- Its a little complicated, but basically we get the width of the object, and the width of the
'--  tooltip_back and center the tooltip_back over the object.

  ttw = desktopx.Object("ToolTip_Back").width/ 2
  ow = object.Width / 2
  temp = ttw - ow
  desktopx.Object("ToolTip_Back").left = object.Left - temp
  desktopx.Object("ToolTip_Back").Top = object.Top - desktopx.Object("ToolTip_Back").height - 10

'--  We have to add a few "IFs here" to see if the object you are mouseing over is at the top of the screen, or of its to close to the left or right side of the screen.
'--  We move the tooltip_back over, down based on the position of the object.

  If desktopx.Object("ToolTip_Back").Top < 20 Then
    desktopx.Object("ToolTip_Back").Top = object.Height + 20
  End If
  If desktopx.Object("ToolTip_Back").left < 20 Then desktopx.Object("ToolTip_Back").left = 10
  If desktopx.Object("ToolTip_Back").left + desktopx.Object("ToolTip_Back").width > system.ScreenWidth Then desktopx.Object("ToolTip_Back").left = system.ScreenWidth - desktopx.Object("ToolTip_Back").width - 30

'--  I have some issues here with these.  I have struggled trying to get the tool tip to show
'-- ON TOP of things on the screen.  It should work with these 3 below.

  desktopx.Object("ToolTip_Back").OnTop
  desktopx.Object("ToolTip_Back").SetFocus
  desktopx.Object("ToolTip_Back").visible = True
End Function

'--  VERY simple function here, HIDE the tooltip_back!
Function HideToolTip()
desktopx.Object("ToolTip_Back").visible = False
End Function

STEP 6 - Test it out.


Once you put the above code into the test object you should be able to mouse over and away and see the tool tip text pop-up.  You might have to make some changes to the above code.

You can move the tooltip_back up or down more based on your preferences.
The changes would be on the places where it shows "Desktopx.Object("ToolTip_Back").Top = ...
You can make that + or - smaller or larger to suit your desires.

STEP 7 - Changes and more changes.


Things you can easily change.
  • Color of the tool-tip background image (play with the hue/brightness/contrast to get it looking the color you would like.
    You could also CODE this so that important tool-tips show up in RED, info in Yellow, etc. Its up to you.
  • Transparency: make the background image as clear as you like.  Again, this could be coded easily.
  • Text: using the  Call desktopx.ScriptObject("ToolTip_Back").ShowToolTip("This is my Tool-Tip")  you can change the text in the tool-tip easily here you can even add multiple lines.
    EX: Call desktopx.ScriptObject("ToolTip_Back").ShowToolTip("Tool Tip Text Line 1" & vbnewline & "second line here" & third line here")
CONCLUSION

This is just my idea on how to change out the built-in tool tip command.

I hope you have enjoyed this step into DX, and look forward to the next installment..

Enjoy,
RomanDA
AKA: David A. Roman
http://romanda.wincustomize.com
15 Replies
Search this post
Subscription Options


Reason for Karma (Optional)
Successfully updated karma reason!
April 30, 2007 6:44:10 PM from WinCustomize Forums WinCustomize Forums
Interesting. Thanks for another great tutorial.
Reason for Karma (Optional)
Successfully updated karma reason!
May 1, 2007 12:08:32 PM from WinCustomize Forums WinCustomize Forums
Ok, was thinking about this a little and i like the idea of multiple colors for different states/events.


Code: vbscript
  1. '--- Replace the main function with this one:
  2. Function ShowToolTip(TextToShow,Style)
  3. desktopx.Object("ToolTip_Text").text = TextToShow
  4. desktopx.Object("ToolTip_Back").height = desktopx.Object("ToolTip_Text").height + 10
  5. desktopx.Object("ToolTip_Back").width = desktopx.Object("ToolTip_Text").width + 20
  6. ttw = desktopx.Object("ToolTip_Back").width/ 2
  7. ow = object.Width / 2
  8. temp = ttw - ow
  9. desktopx.Object("ToolTip_Back").left = object.Left - temp
  10. desktopx.Object("ToolTip_Back").Top = object.Top - desktopx.Object("ToolTip_Back").height
  11. - 10
  12. If desktopx.Object("ToolTip_Back").Top system.ScreenWidth Then desktopx.Object("ToolTip_Back").left = system.ScreenWidth - desktopx.Object("ToolTip_Back").width - 30
  13. '--- Change these to your own Styles with their own Colors, etc.
  14. Select Case Style
  15. Case "Danger"
  16. desktopx.Object("ToolTip_Back").hue = 0
  17. desktopx.Object("ToolTip_Back").Brightness = 40
  18. Case "Warning"
  19. desktopx.Object("ToolTip_Back").hue = 30
  20. desktopx.Object("ToolTip_Back").Brightness = 0
  21. Case "Good"
  22. desktopx.Object("ToolTip_Back").hue = 50
  23. desktopx.Object("ToolTip_Back").Brightness = -10
  24. Case "Info"
  25. desktopx.Object("ToolTip_Back").hue = 40
  26. desktopx.Object("ToolTip_Back").Brightness = 0
  27. End Select
  28. desktopx.Object("ToolTip_Back").OnTop
  29. desktopx.Object("ToolTip_Back").SetFocus
  30. desktopx.Object("ToolTip_Back").visible = True
  31. End Function
  32. '--- You would need to replace your CALL to the above function:
  33. Sub Object_OnMouseEnter
  34. Call ShowToolTip("This is my Tool-Tip","Info")
  35. End Sub



Just another idea of what you can do. I would make some sort of "base" object and put the function into that, but you would have to make some changes to how it finds the h/w of the "object". but thats not that hard to add.

Is anyone even caring about this stuff?
Reason for Karma (Optional)
Successfully updated karma reason!
May 1, 2007 2:24:11 PM from WinCustomize Forums WinCustomize Forums

David: great job on yet another very useful and professionally presented tutorial. You are a pillar to the DX community   

 

Reason for Karma (Optional)
Successfully updated karma reason!
Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.
May 2, 2007 2:58:53 AM from WinCustomize Forums WinCustomize Forums
Very nice & very useful. Thanks!
Reason for Karma (Optional)
Successfully updated karma reason!
May 2, 2007 8:36:13 AM from WinCustomize Forums WinCustomize Forums
Thank you for another useful guide
Reason for Karma (Optional)
Successfully updated karma reason!
May 2, 2007 12:17:45 PM from WinCustomize Forums WinCustomize Forums
please note an update (if you tried to use the code here on 5/1/07 or earlier)

CORRECT CODE:

Sub Object_OnMouseEnter
Call ShowToolTip("This is my Tool-Tip")
End Sub

Sub Object_OnMouseLeave
Call HideToolTip()
End Sub

In my original example i had the code split into multiple places.
Reason for Karma (Optional)
Successfully updated karma reason!
July 24, 2011 12:42:27 AM from WinCustomize Forums WinCustomize Forums

David, I can't get this to work on a gadget. Works great in a widget or a DX theme! 

Reason for Karma (Optional)
Successfully updated karma reason!
July 24, 2011 6:51:51 AM from WinCustomize Forums WinCustomize Forums

just to find this again

Reason for Karma (Optional)
Successfully updated karma reason!
August 25, 2011 1:37:18 PM from WinCustomize Forums WinCustomize Forums

Quoting RedneckDude,
David, I can't get this to work on a gadget. Works great in a widget or a DX theme! 

Dont understand that, i have used it on multiple gadgets (Transporter, etc). and its worked fine,

Reason for Karma (Optional)
Successfully updated karma reason!
August 25, 2011 3:17:10 PM from WinCustomize Forums WinCustomize Forums

I made a widget, works. Gadgetized the widgets, no worky.

Reason for Karma (Optional)
Successfully updated karma reason!
April 23, 2013 3:50:23 PM from WinCustomize Forums WinCustomize Forums

For the life of me, I can't get the tooltip to open where the button is located.

Reason for Karma (Optional)
Successfully updated karma reason!
April 26, 2013 10:12:30 AM from WinCustomize Forums WinCustomize Forums

might need to take into account when objects are children of another object, their 0,0 origin is based on the top left of the parent.

So a tooltip needs to be moved additional distance.

Reason for Karma (Optional)
Successfully updated karma reason!
April 26, 2013 11:43:55 AM from WinCustomize Forums WinCustomize Forums

see if this does what you want RND? http://sdrv.ms/17mLwgd

(sorry had to use skydrive, dropbox was down - it's a dxpack)

Reason for Karma (Optional)
Successfully updated karma reason!
April 26, 2013 12:08:22 PM from Stardock Forums Stardock Forums

It's great that these posts are still being used and updated.  

Reason for Karma (Optional)
Successfully updated karma reason!
April 26, 2013 12:28:25 PM from WinCustomize Forums WinCustomize Forums

Quoting Skarny,

might need to take into account when objects are children of another object, their 0,0 origin is based on the top left of the parent.

So a tooltip needs to be moved additional distance.

 

Tooltip keeps opening at the top left of my screen, a good 800 pixels from it's object, or even the object's parent.

I'll check your link, thanks Skarn. Good to see you.

Reason for Karma (Optional)
Successfully updated karma reason!
Stardock Forums v1.0.0.0    #108432  walnut2   Server Load Time: 00:00:00.0000422   Page Render Time:

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
WinCustomize © 2014 Stardock Corporation. All Rights Reserved.