Markup and Scripting

The HTML markup below shows how you can use a wijtooltip widget with a number of HTML elements.

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>

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.

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>

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.

KO

Concepts

Reference