html中span添加tooltip,Tooltip（提示框）

Tooltip(提示框)

使用$.fn.tooltip.defaults重写默认值对象。(译者注：1.3.3版中新增的plugin)

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

使用案例

创建提示框

1. 通过标签创建提示框，给元素添加一个"easyui-tooltip"的类名，无需任何Javascript代码。

Hover me

2. 通过Javascript创建提示框。

Click here

$('#dd').tooltip({

position: 'right',

content: 'This is the tooltip message.',

onShow: function(){

$(this).tooltip('tip').css({

backgroundColor: '#666',

borderColor: '#666'

});

});

属性

属性名

属性值类型

描述

默认值

position

string

消息框位置。可用值有："left","right","top","bottom"

bottom

content

string

消息框内容。

null

trackMouse

boolean

为true时，允许提示框跟着鼠标移动。

false

deltaX

number

水平方向提示框的位置。

0

deltaY

number

垂直方向提示框的位置。

0

showEvent

string

当激发什么事件的时候显示提示框。

mouseenter

hideEvent

string

当激发什么事件的时候隐藏提示框。

mouseleave

showDelay

number

延时多少秒显示提示框。

200

hideDelay

number

延时多少秒隐藏提示框。

100

事件

事件名称

事件参数

描述

onShow

e

在显示提示框的时候触发。

onHide

e

在隐藏提示框的时候触发。

onUpdate

content

在提示框内容更新的时候触发。

onPosition

left,top

在提示框位置改变的时候触发。

onDestroy

none

在提示框被销毁的时候触发。

方法

方法名

方法参数

描述

options

none

返回控件属性对象。

tip

none

返回tip元素对象。

arrow

none

返回箭头元素对象。

show

e

显示提示框。

hide

e

隐藏提示框。

update

content

更新提示框内容。

reposition

none

重置提示框位置。

destroy

none

销毁提示框。

,