 |
| 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..