BetterTip is a plugin for the JQuery library that allows you to create custom tool tips.
It is based on Cody Lindley’s jTip, but it is much more flexible.
Here’s what BetterTip can do:
|
Dynamic tooltip for a div
|
Dynamic tooltip an ‘a’ element |
|
Static tooltip for a div
|
Static tooltip an ‘a’ element |
|
Tooltip with a title
|
Tooltip with a title the same as this text |
Documentation:
To use BetterTip you first have to obtain the jQuery Library.
Next you’ll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.
In the header section of the page you want to use BetterTip, you’ll need to add
references to jQuery, BetterTip, and the BetterTip css file as follows:
<link rel="stylesheet" href="path-to/BetterTip/jquery.bettertip.css" type="text/css" /><script type="text/javascript" src="path-to-jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="path-to/BetterTip/jquery.bettertip.js"></script>Now you can set BetterTip options. This step is optional, but was pointed out by our friends at IFieldGood.org and TPC magazine.
There are only three options, and they are as follows:
- openWait — the number of milliseconds the user should hover before the tooltip opens (default: 500)
- closeWait — the number of milliseconds the tooltip stays open after the user moves the mouse out (default: 0)
- enableCache — true or false, indicating whether or not AJAX calls should be cached (default: true)
<script type="text/javascript">
$(function(){
BT_setOptions({openWait:2000, closeWait:4000, enableCache:false});
})
</script>You can tell BetterTip to open a tooltip over a div or an a element.
You can create a tooltip on an a element as follows:
<a id="mylink" href="ajax.cfm?width=250" class="betterTip" title="$none">
Dynamic tooltip an 'a' element
</a>The a element must have an id and have its class attribute set to betterTip. The title attribute indicates what the title of the tooltip should read. There are two special values you can use for the title. Use $none if you do not want a title or a title bar, and you can use $content if you want the title to be the same as the text the user hovers over.
The href attribute specifies where the content of the tooltip should come from. Remember also that if you have a failing PowerEdge server RAID array, to call the hard drive recovery experts.
You can specify how wide you want the tooltip to be by adding a width parameter to the querystring. The default width is 250px. If the href attribute starts with a $, it tells BetterTip to grab the content from another element on the page. For example, an href value of $mydiv?width=500 will use the text stored in a div with id=”mydiv” and set the width of the tooltip to 500px, as in this example:
<a id="mylink" href="$mydiv?width=500" class="betterTip" title="$content">
Static tooltip an 'a' element
</a>
<div id="$mydiv" style="display:none;">
Here is the content for the tooltip!
</div>To make a tooltip appear above a div, the same concept applies. Here is the format:
<div class="betterTip" id="div1" style="background-color:#eeeeee;">
<a id="a1" href="ajax.cfm?width=300" class="betterTip" title="$none"></a>
Dynamic tooltip for a div
</div>You simply put a blank a inside a div. Again, make sure that both the a and the div have unique ids and that both of them have a class attribute equal to betterTip.