TipTip | How It Works
TipTip uses the title attribute
just like the native browser tooltip does. However, the
title will be copied and then removed from the element
when using TipTip so that the browser tooltip will
not show up.
TipTip only generates one set of popup elements
total, rather then generating one set of popup elements for each
element with TipTip applied to it. This helps
speed things up and reduces processing time. The elements generated
are all div elements and are appended to the end of
the body element. The structure looks like this:
<div id="tiptip_holder">
<div id="tiptip_content">
<div id="tiptip_arrow">
<div id="tiptip_arrow_inner"></div>
</div>
</div>
</div>
There are specific CSS class names added to the "tiptip_holder"
div element when it appears depending on the
orientation it appears in. Here is a list of the class names along
with it's orientation:
- tip_top - When the tooltip appears above the element.
- tip_bottom - When the tooltip appears below the element.
- tip_left - When the tooltip appears to the left the element.
- tip_right - When the tooltip appears to the right the element.
- tip_left_top - When the tooltip appears to the left and above the element.
- tip_left_bottom - When the tooltip appears to the left and below the element.
- tip_right_top - When the tooltip appears to the right and above the element.
- tip_right_bottom - When the tooltip appears to the right and below the element.
TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.