BetterTip
Created By Edgar Verle
You may also be interested in:
-
Shadow -- Put shadows on divs with no images or css
- or -
Add this Google Gadget to your homepage or webpage. It allows you to see your google adsense revenue at a glance:
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:
Download BetterTip
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.
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.
Like what you see?