DesktopX: Replacing the Tool-Tip
From WinCustomize Wiki
| Learning DX Step-By-Step - #8: Tool-Tip Replacement | ||||||||
| ||||||||
Contents |
[edit] Introduction
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.
[edit] Tool-Tip Replacement
[edit] STEP 1 - Create a simple graphic background 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.
[edit] 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"
[edit] 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
[edit] 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.
Sub Object_OnMouseEnter
Call ShowToolTip("This is my Tool-Tip")
End Sub
Sub Object_OnMouseLeave
Call HideToolTip()
End Sub
[edit] 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. (In the code comments)
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
[edit] 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.
[edit] 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")
[edit] 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
