Introduction
How do you sneak in handy explanations without turning your page into a User Manual? And without nasty pop-ups?
Answer: use a Tool Tip.
The familiar explanatory tool is easilly implemented using this widget, and can be set to open on any event for any HTML element.
Hint: To keep the Tool Tip open, put your mouse over it.
API
Constructor
ToolTip(target, text[, delay][, cssClass]);
- target
- ID of the text target tag, the element to which the Tool Tip will be attached
- text
- Text to display in the Tool Tip. Any HTML will do
- delay
- Optional. Milisecond delay after which the Tool Tip will disappear. Default: 1000
- cssClass
- Optional. Name of Css Class to give the Tool Tip span element. Default: tooltip
[Top of page]
Demo
[Top of page]
Code
HTML
<label for="txtPwd">Password:</label><input type="text" id="Text1" value="" />
<span id="aTest" class="tt-target"
onmouseover="javascript:new ylib.widget.ToolTip('aTest',
'Password must have at least <b>6 characters</b><br><br>
Strong passwords use a mixture of upper and lower characters
and at least one digit');"
>Hint</span>
Javascript
<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_ToolTip.js"></script>
Css
.tooltip {
padding: 10px;
border: solid 1px Purple;
color: Purple;
background-color: LightBlue;
}
.tt-target {
position:absolute;
text-decoration:underline;
margin-left: 5px;
}
NOTE: IE 6 doesn't support the offsetTop property adequately in some situations. To get around this, make sure that the target element (in our example, the span tag with class tt-target) has position:absolute.
Above we use the onmouseover event to activate the Tool Tip, but you can use any other event such as onclick, etc.
[Top of page]
Files
Note: Make sure you have the latest version of all JavaScript files listed below.
[Top of page]
Recommendations