Jquery tooltip plugin demo

ArticleDirectory

• Code
• Code
• Code
• Code
• Code
• Code

Jquery tooltip plugin demo Three elements with tooltips, default settings

Link to Google
Input something please!

Code

  $  ( '# set1 *'  ). tooltip ();  

using bodyhandler to display footnotes in the tooltip

some text referring to a footnote.

and here is the actual footnote, complete with nested HTML . Code

  $  ( "# foottip a " ). tooltip ({
 bodyhandler:  function  () {
  return  $  ($  ( This  ). ATTR ( "href"  paiyun.html (); 
}, 
 showurl:  false  
});  

an image with a tooltip

Code

  $  ( '# tonus ' ). tooltip ({
 delay:  0 , 
 showurl:  false , 
 bodyhandler:  function  () {
  return  $  ("  " ). ATTR ( "src" ,  This . SRC); 
}< BR >});  

blocking tooltips

click this button to block/unblock all tooltips

  $  ( "# block " ). click ($ . tooltip.  block );  

the next four links have no delay with tracking and fading, with extra content: link to Yahoo link to yahoo1 link to yahoo2 link to yahoo3 bgiframe test code

  $  ( '# yahoo a'  ). tooltip ({
 track:  true , 
 delay:  0 , 
 showurl:  false , 
 showbody:  "-" , 
 fade:  250  
 });  

ToolTips with extra classes. Useful for different tooltip styles on a single page.

Note how the one on the right gets a different background image when at the right viewport border.
A fancy tooltip, now with some M positioning. A fancy tooltip, now with some M positioning.

And now, for the fancy stuff, A tooltip with an extra class for nice shadows, and some extra content

Bgiframe TestCode

$ ( "# Fancy, # fancy2" ). Tooltip ({
Track: True ,
Delay: 0 ,
Showurl: False ,
Opacity: 1 ,
Fixpng: True ,
Showbody: "-" ,
Extraclass: "Pretty fancy" ,
Top :- 15 ,
Left: 5 
});

 $ ( '# Pretty' ). Tooltip ({
Track: True ,
Delay: 0 ,
Showurl: False ,
Showbody: "-" ,
Extraclass: "Pretty" ,
Fixpng: True ,
Opacity: 0.95 ,
Left :- 120 
});

Selects 1. Option2. Option3. Option Image map with tooltips.

Code

$("Map *"). Tooltip ({positionleft:True});

Testing repositioning at viewport borders

Tooltip with fixed width
Google me!
Google me!

Tooltip width auto width
Google me!
Google me!

Code

$('# Right'). Tooltip ({
Track:True,
Delay:0,
Showurl:False,
Extraclass:"Right" 
});
$('# Right2'). Tooltip ({showurl:False, Positionleft:True});

Yahoo doomore content