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.

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:
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.
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. 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.
Demo: http://edgarverle.com/BetterTip/default.cfm
Download: http://edgarverle.com/BetterTip/bettertip.zip
Source: http://edgarverle.com/BetterTip/default.cfm

Related Listings:

1. Mobile Tooltip Widget I am making an Ajax application using GWT and I...
2. jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...
3. Build a Better Tooltip with jQuery Awesomeness Apr 1st in Javascript & AJAX by Jon Cazier Browsers...
4. Inline Edit Plugin – Moo Script An even newer version of inlineEdit is out! Check out...
5. Boxover – Javascript/DHTML Tooltips BoxOver uses javascript / DHTML to show tooltips on a...

Do you like this post?

Email: