zudolab jqTooltip

Simple usage

1. Load jQuery and "jqTooltip.js"

2. Specify the tip launcher elements using jQuery selector and behavior like following code.

   new jqTooltip({
       selector: "a.tipLauncher",
       behavior: "chaseHover"
   });

   <a href="URL" title="This is jqTooltip test!" class="tipLauncher">tipTest</a>

3. You can see tooltip with text specified as title attirbute of the anchor element when you put the mouse on the anchor element.

Options

jqTooltip can be customized easily.
You can specify the options like following code.

new jqTooltip({
    selector: "a.tipLauncher",
    behavior: "chaseHover",
    width: "200px",
    height: "200px"
});

Following table is the list of the options.
I prepared demos for each of them.

behavior	Event to show tip. Specify "chaseHover" or "click". Default value is "chaseHover". If you specify the "chaseHover", tip will be visible while the user put the pointer on the element specified as "selector". If you specify the "click", tip will be visilbe when the user click the element specified as "selector". This tip will be closed when the user push the close button in the tip. behavior demo
separator_title, separator_br	Separator string to separate title and main, breakline. Specify string. Default value of "separator_title" is " --- ". Default value of "separator_br" is " -- ". The text inside the tip is separatable and the tip can contain breakline in it. I explain this in the next chapter. separator demo
showURL	Put the target URL of the anchor element in the tip or not. Specify true or false. Default value is false. If you specify anchor elements as "selector", You can choose to put the href value in the tip to set this value true. showURL demo
delay	Delay time to show the tip. Specify 1/1000 seconds time. Default value is 100. (means 100/1000 seconds) This option is effective when you choose "chaseHover" as "behavior". delay demo
tipPosition	Position of the tip from the mouse pointer. Specify "right" or "left". Default value is "right". This means that the tip will be shown on the right side of the mouse pointer. tipPosition demo
offsetX, offsetY	Offset of the tip from the mouse pointer. Speficy number. Defualt value of "offsetX" is 20. Default value of "offsetY" is -8. This means that the tip will be shown on the 20 pixel right and 8 pixel top from the tip. offsetX, offsetY demo
width, height	Tip's width and height. Specify css width,height value. Default value of "width" and "height" is "auto". You can fix the tip's width and height if you specify "200px" or "7em" or something like this. width, height demo
opacity	Tip's opacity. Specify the number. 0 < n <= 1. Default value is "not specified" (null). opacity demo
singleTip	Allow multi tips or not. Specify true or false. Default value is false. This is effective only when you choose "click" as "behavior". If you choose true, multi tips will not be allowed. When the user opened the 2nd tip, 1st tip will be cloased automatically. singleTip demo
maxWidth	Max width of the tip. Specify number. Default value is "not specified" (null). This is effective only when you choose "auto" as "width". Tip's width will be decided depending on the text inside the tip. If you specify this value, for example 300, Tip's width will be 300 pixel when the tip's width got more than 300 pixel. maxWidth demo
keepNaturalWidth	Keep the natural width of the tip or not. Specify true or false. Default value is false. This is effective only when you choose "auto" as "width". If you choose true, the tip's width will be fixed as the first rendering result. The text inside the tip will not be turned. keepNaturalWidth demo
tipClass	You can append the extra className to the tip. The className of the tip is "tipContainer". If you specify this value, for example "appendedClassName", The className of the tip will be "tipContainer appendedClassName". You can change tip's decoration with this opation. tipClass demo
tipHTML	You can change the tip's HTML. If you want to decorate more, for example, want to make rounded corner or want to put imgs or some other text, try this feature, you may need to add extra elements inside the tip. You can change the html inside the tip freely. tipHTML demo
iframeLayer	Append iframeLayer or not. Default value is false. When the tip element is on the select element, in IE6, tip element cannnot be put on the select element. IE6 renders select element on the most top layer anytime. You can avoid this to set true. This appends extra iframe without src under the tip element. This will resolve the problem. Use this feature when you got trouble in IE6 about select elements. iframeLayer demo

Separator

The text inside the tip can be separated into "title" and "main" to put " --- " in the attribute value. The title of following html's tip will be "THE TITLE". and its main will be "MAIN TEXT MAIN TEXT".

<a href="tipLauncher" title="THE TITLE --- MAIN TEXT MAIN TEXT">Tip</a>

You can put <br /> in the tip to put " -- ".
" -- " will be replaced to <br /> in the tip element.

<a href="tipLauncher" title="BRTEST -- BRTEST -- BRTEST">Tip</a>

" --- " and " -- " can be specified as "separator_title" and "separator_br" option.

• separator demo

Tip close method

You can close tips opened by jqTooltip whose option "behavior" is "click" by closeAllTips method.
This will close all associated tooltips.
See following demo about this.

• tipCloseMethod demo