Tooltip(settings)

为选择的元素显示自定义工具提示代替默认的提示。

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", });