« Back to Plugins/Tooltip

[edit]

tooltip( [options] )

Display a customized tooltip instead of the default one for every selected element.
The tooltip behaviour mimics the default one, but lets you style the tooltip and specify the delay before displaying it. In addition, it displays the href value, if it is available.

When used on a page with select elements, include the bgiframe plugin. It is used if present.

To style the tooltip, use these selectors in your stylesheet:

#tooltip - The tooltip container

#tooltip h3 - The tooltip title

#tooltip div.body - The tooltip body, shown when using showBody

#tooltip div.url - The tooltip url, shown when using showURL

The id #tooltip can be changed using the id option.
Arguments:
options (Optional)Options
A set of key/value pairs that configure the validate. All options are optional.


Options:

NameType
delayIntegerDefault: 250
The number of milliseconds before a tooltip is display.
Disable the delay to display tooltips in the very instant the element is hovered.

$(".selector").tooltip({
   delay: 0
})

trackBooleanDefault: false
If true, let the tooltip track the mousemovement.
Enable mousetracking, display the tooltip at the mouse while hovering the tooltipped element.

$(".selector").tooltip({
   track: true
})

showURLBooleanDefault: true
If true, shows the href or src attribute within div.url.
Hides the URL (href or src) in the tooltip.

$(".selector").tooltip({
   showURL: false
})

showBodyStringDefault: none, display title as is
If specified, uses the String to split the title, displaying the first part in the h3 tag, all following in the div.body tag, separated with
s.
Splits the title with " - ", display a title "News - click for details" as a h3 element with "News" and "click for details" in div.body.

$(".selector").tooltip({
   showBody: " - "
})

bodyHandlerCallbackDefault: none
If specified its called to format the tooltip-body, hiding the title-part. The callback can return a HTML-String, a DOM element or a jQuery object.
Assuming images with small height/width set, the tooltip displays them fullsize by creating a new img element and setting the src attribute.

$("img.small").tooltip({
   bodyHandler: function() {
     return $("<img/>").attr("src", this.src);
   }
})

Create tooltips that display content by looking for the element as specified by the href attribute. In other words, inlining footnotes in tooltips.

$("a.footnote").tooltip({
   bodyHandler: function() {
     return $($(this).attr("href")).html();
   },
   showURL: false
})

extraClassStringDefault: none, no extra class is added
If specified, adds the class to the tooltip helper.
Adds a class "fancy" to the tooltip element.

$(".selector").tooltip({
   extraClass: "fancy"
})

idStringDefault: "tooltip"
The id to use for the tooltip element
fixPNGBooleanDefault: false
If true, fixes transparent background-image PNGs in IE.
Enables fixing background PNGs in IE, useful when dealing with transparent images.

$(".selector").tooltip({
   fixPNG: true
})

topIntegerDefault: 15
The top-offset for the tooltip position. 0 is the mouse position.
leftIntegerDefault: 15
The left-offset for the tooltip position. 0 is the mouse position.
Positions the tooltip 25 pixels to the top of the mouse and 50 pixels to the left.

$(".selector").tooltip({
   top: -25,
   left: -50
})

Replaces the default tooltip of anchors with customized ones.

$("a").tooltip();


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" type="text/css" href="http://dev.jquery.com/view/trunk/plugins/tooltip/jquery.tooltip.css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/tooltip/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/tooltip/jquery.tooltip.js"></script>
  <script>
  $(document).ready(function(){
    $("a").tooltip();
  });
  </script>
  
</head>
<body>
  
<a href="http://jquery.com" title="Write less, do more">jQuery.com</a>
<br/>
<a href="http://learningjquery.com" title="Learn more, write less">learningjQuery.com</a>

</body>
</html>

}}