Monday, April 30, 2007 by RomanDA | Discussion: DesktopX Tutorials
#8 - Tool-Tip Replacement
A series by RomanDA
Listing of other DX Tutorials:
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.
Call ShowToolTip("This is my Tool-Tip")
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)
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.
'--- We need to position the tool-tip above the object you are
'-- 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.
'-- I have some issues here with these. I have
struggled trying to get the tool tip to show
'-- VERY simple function here, HIDE the tooltip_back!
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.
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")
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..
AKA: David A. Roman