Apr
29
0

TipTip jQuery Plugin

Author admin    Category Plugin     Tags , , ,

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

tiptip jquery plugin

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.

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.

You can visit and download the free code here: http://code.drewwilson.com/entry/tiptip-jquery-plugin

Post comment