Learning DX Step-By-Step - #8

Tool-Tip Replacement

Monday, April 30, 2007 by RomanDA | Discussion: DesktopX Tutorials

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 Reply 26 Referrals
SirSmiley
Reply #1 Monday, April 30, 2007 6:44 PM
Interesting. Thanks for another great tutorial.

RomanDA
Reply #2 Tuesday, May 1, 2007 12:08 PM
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:
  3. Function ShowToolTip(TextToShow,Style)
  5. desktopx.Object("ToolTip_Text").text = TextToShow
  7. desktopx.Object("ToolTip_Back").height = desktopx.Object("ToolTip_Text").height + 10
  9. desktopx.Object("ToolTip_Back").width = desktopx.Object("ToolTip_Text").width + 20
  11. ttw = desktopx.Object("ToolTip_Back").width/ 2
  13. ow = object.Width / 2
  15. temp = ttw - ow
  17. desktopx.Object("ToolTip_Back").left = object.Left - temp
  19. desktopx.Object("ToolTip_Back").Top = object.Top - desktopx.Object("ToolTip_Back").height
  20. - 10
  21. If desktopx.Object("ToolTip_Back").Top system.ScreenWidth Then desktopx.Object("ToolTip_Back").left = system.ScreenWidth - desktopx.Object("ToolTip_Back").width - 30
  27. '--- Change these to your own Styles with their own Colors, etc.
  29. Select Case Style
  31. Case "Danger"
  33. desktopx.Object("ToolTip_Back").hue = 0
  35. desktopx.Object("ToolTip_Back").Brightness = 40
  37. Case "Warning"
  39. desktopx.Object("ToolTip_Back").hue = 30
  41. desktopx.Object("ToolTip_Back").Brightness = 0
  43. Case "Good"
  45. desktopx.Object("ToolTip_Back").hue = 50
  47. desktopx.Object("ToolTip_Back").Brightness = -10
  49. Case "Info"
  51. desktopx.Object("ToolTip_Back").hue = 40
  53. desktopx.Object("ToolTip_Back").Brightness = 0
  55. End Select
  59. desktopx.Object("ToolTip_Back").OnTop
  61. desktopx.Object("ToolTip_Back").SetFocus
  63. desktopx.Object("ToolTip_Back").visible = True
  65. End Function
  71. '--- You would need to replace your CALL to the above function:
  73. Sub Object_OnMouseEnter
  75. Call ShowToolTip("This is my Tool-Tip","Info")
  77. 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?

milksama
Reply #3 Tuesday, May 1, 2007 2:24 PM

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

 


sViz
Reply #4 Wednesday, May 2, 2007 2:58 AM
Very nice & very useful. Thanks!

danioc
Reply #5 Wednesday, May 2, 2007 8:36 AM
Thank you for another useful guide

RomanDA
Reply #6 Wednesday, May 2, 2007 12:17 PM
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.

RedneckDude
Reply #7 Sunday, July 24, 2011 12:42 AM

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


Disturbedcomputer
Reply #8 Sunday, July 24, 2011 6:51 AM

just to find this again


RomanDA
Reply #9 Thursday, August 25, 2011 1:37 PM

RedneckDude
reply 7
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,


RedneckDude
Reply #10 Thursday, August 25, 2011 3:17 PM

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


RedneckDude
Reply #11 Tuesday, April 23, 2013 3:50 PM

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


Skarny
Reply #12 Friday, April 26, 2013 10:12 AM

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.


Skarny
Reply #13 Friday, April 26, 2013 11:43 AM

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

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


ZubaZ
Reply #14 Friday, April 26, 2013 12:08 PM

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


RedneckDude
Reply #15 Friday, April 26, 2013 12:28 PM

Skarny
reply 12

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.


Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!
Login

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


web-wc01