jqueryui的Tooltip使用方法

http://api.jqueryui.com/tooltip/#option-position，详细使用方法。

http://jqueryui.com/tooltip/，DEMO。

content使用

$( ".selector" ).tooltip({ content: "Awesome title!" });//div及相关标签使用样式，鼠标放上去时显示"Awesome title!"，例如：<div class="selector">test</div>

初始化后设置或获取内容

// getter

 

var content = $( ".selector" ).tooltip( "option", "content" );

// setter

 

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

items

调用时默认获取Title的属性，例如<div title="test"></div>，默认显示"test"。

也可以设置其它值，$( ".selector" ).tooltip({ items: "img[alt]" });//获取图片的alt属性.

获取不同的属性，事例可以参考:http://jqueryui.com/tooltip/#custom-content

初始化后设置或获取内容

// getter

var items = $( ".selector" ).tooltip( "option", "items" );

 

// setter

$( ".selector" ).tooltip( "option", "items", "img[alt]" );

 

position设置显示位置

$( ".selector" ).tooltip({ position: { my: "left+15 center", at: "right center" } });

设置或获取位置信息

// getter

var position = $( ".selector" ).tooltip( "option", "position" );

// setter

$( ".selector" ).tooltip( "option", "position", { my: "left+15 center", at: "right center" } );

tooltipClass显示的样式可以改变

$( ".selector" ).tooltip({ tooltipClass: "custom-tooltip-styling" });

设置或获取显示的样式信息

// getter

var tooltipClass = $( ".selector" ).tooltip( "option", "tooltipClass" );

// setter

$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );

转载于:https://www.cnblogs.com/caigl/archive/2013/03/29/2989545.html