Way 2 Web

Web development tips


 

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

Tool Tips

Mouse over the "hint" text for the Tool Tip

Hint
[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]