$("[title]").tooltip();
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <link href="http://view.jqueryui.com/tooltip/themes/base/jquery.ui.tooltip.css" rel="stylesheet" type="text/css"/> <script src="http://view.jqueryui.com/tooltip/ui/jquery.ui.tooltip.js"></script> <script> $(document).ready(function() { $("[title]").tooltip(); }); </script> </head> <body style="font-size:62.5%;"> <p> <a href="#" title="Anchor description">Anchor text</a> <input title="Input help" /> </p> </body> </html>
Triggered when the tooltip is displayed. Can be used further modify or position the widget, eg. have it follow the mouse movement.
open
event as an init option.
$( ".selector" ).tooltip({
open: function(event, ui) { ... }
});
open
event by type: tooltipopen
.
$( ".selector" ).bind( "tooltipopen", function(event, ui) {
...
});
Triggered when the tooltip is hidden.
close
event as an init option.
$( ".selector" ).tooltip({
close: function(event, ui) { ... }
});
close
event by type: tooltipclose
.
$( ".selector" ).bind( "tooltipclose", function(event, ui) {
...
});
Remove the tooltip functionality completely. This will return the element back to its pre-init state.
Disable the tooltip.
Enable the tooltip.
Get or set any tooltip option. If no value is specified, will act as a getter.
Set multiple tooltip options at once by providing an options object.
Returns the .ui-tooltip element.
Programmatically show the tooltip. Content and position depends on the related options.
Programmatically hide the tooltip.
The jQuery UI Tooltip plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.tooltip.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the tooltip plugin, not markup you should use to create a tooltip. The only markup needed for that is an elemenet with a title attribute.