Lightweight Tooltips With jQuery

Home TooltipsLightweight Tooltips With jQuery

Lightweight Tooltips With jQuery

14 years ago Views

7674

1559

dave-earley

Query Tiper is an extremely lightweight jQuery tooltip which allows you to assign a tooltip to any element.

Usage

Using it is very simple, for example if you would like to give a link a tooltip you would give it the class tiper and any id of you choice.

<a class = 'tiper' id = 'tooltip_1' href = '#' >Sample Link</a>

You would then create a div which class equals the links id. This div will house the html to be shown in the tooltip and should be set to ‘display:none’.

<div class = 'tooltip_1' style = 'display:none;'>
This is the tooltip content
</div>

To initialize tiper simply use the following :

<script type="text/javascript" >
$(document).ready(function($){
 tiper();
 })
</script>

Settings

You can specify the xOffset , yOffset & the tooltips id by doing the following

<script type="text/javascript" >
$(document).ready(function($){
 tiper(10, 10, div_id);
 })
</script>

Tag: tooltips