jQuery API jQuery API 中英文对照版 - jQuery在线查询手册
Tooltip(settings)

Tooltip(settings)

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. To style the tooltip, use these selectors in your stylesheet: #tooltip - The tooltip container #tooltip h3 - The tooltip title #tooltip p.body - The tooltip body, shown when using showBody #tooltip p.url - The tooltip url, shown when using showURL

返回值

jQuery

参数

  • settings (Object): (optional) Customize your Tooltips

Hash 选项

  • delay (Number): The number of milliseconds before a tooltip is display, default is 250
  • event (String): The event on which the tooltip is displayed, default is "mouseover", "click" works fine, too
  • track (Boolean): If true, let the tooltip track the mousemovement, default is false
  • showURL (Boolean): If true, shows the href or src attribute within p.url, default is true
  • showBody (String): If specified, uses the String to split the title, displaying the first part in the h3 tag, all following in the p.body tag, separated with <br/>s, default is null
  • extraClass (String): If specified, adds the class to the tooltip helper, default is null
  • fixPNG (Boolean): If true, fixes transparent PNGs in IE, default is false

示例

说明:

Shows tooltips for anchors, inputs and images, if they have a title

jQuery 代码:
$('a, input, img').Tooltip();
说明:

Shows tooltips for labels with no delay, tracking mousemovement, displaying the tooltip when the label is clicked.

jQuery 代码:
$('label').Tooltip({ delay: 0, track: true, event: "click" });
说明:

This example starts with modifying the global settings, applying them to all following Tooltips; Afterwards, Tooltips for anchors with class pretty are created with an extra class for the Tooltip: "fancy" for anchors, "fancy-img" for images

jQuery 代码:
// modify global settings $.extend($.fn.Tooltip.defaults, { track: true, delay: 0, showURL: false, showBody: " - ", fixPNG: true }); // setup fancy tooltips $('a.pretty').Tooltip({ extraClass: "fancy" }); $('img.pretty').Tooltip({ extraClass: "fancy-img", });