The HTML markup below shows how you can use a wijtooltip widget with a number of HTML elements.
Drop down to view markup
Markup |
Copy Code
|
<!--adds a tooltip to a label-->
<label id="tooltip" title="Tooltip Title">Hover here to see the first tooltip.</label>
<br />
<!--adds a tooltip to an input-->
<input title="Let your users know what to enter in this textbox." type="text" />
<!--adds a tooltip to an input nested in a div-->
<div id="targetContainer">
<input title="Let your users know that their password input is hidden." type="password" />
</div> |
You can initialize the widget with the following jQuery script.
Drop down to view script
Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("[title]").wijtooltip({
//delays hiding the tooltip after you mouse out
//for four seconds (4,000 milliseconds)
hideDelay: 4000
});
});
</script> |
The markup and script featured here results in the following live widget. Mouse over the elements to see the tooltips.
See Also
Concepts
Reference