提示信息 Tooltip
用$.fn.tooltip.defaults重写了Defaults方法
当用户移动鼠标到一个元素上,工具提示信息窗口显示附加信息,工具提示可以包含任何来自于页面或者通过ajax传递的html元素。
使用示例(Usage Example)
创建tooltip
通过标记创建tooltip,在该元素上新增‘easyui-tooltip’类,不需要javascript代码
Hover me
通过javascript创建tooltip
Click here
$('#dd').tooltip({
position: 'right',
content: 'This is the tooltip message.',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
},2);
}
},2);
属性(Properties)
Name
|
Type
|
Description
|
Default
|
position
|
string
|
Tooltip的位置,可能的值有:'left','right','top','bottom'
|
bottom
|
content
|
string
|
Tooltip的内容
|
null
|
trackMouse
|
boolean
|
设置为true的话tooltip跟随鼠标显示信息
|
false
|
deltaX
|
number
|
Tooltip的水平距离
|
0
|
deltaY
|
number
|
Tooltip的垂直距离
|
0
|
showEvent
|
string
|
造成tooltip显示的事件
|
mouseenter
|
hideEvent
|
string
|
造成tooltip消失的事件
|
mouseleave
|
showDelay
|
number
|
延迟显示tooltip的时间
|
200
|
hideDelay
|
number
|
延迟隐藏tooltip的时间
|
100
|
事件(Events)
Name
|
Parameters
|
Description
|
onShow
|
e
|
Tooltip显示的时候触发
|
onHide
|
e
|
Tooltip隐藏的时候触发
|
onUpdate
|
content
|
Tooltip内容更新之后触发
|
onPosition
|
left,top
|
Tooltip的位置变化的时候触发
|
onDestroy
|
none
|
Tooltip销毁的时候触发
|
方法(Methods)
Name
|
Parameter
|
Description
|
options
|
none
|
返回options属性
|
tip
|
none
|
返回tip对象
|
arrow
|
none
|
返回arrow对象
|
show
|
e
|
显示tooltip
|
hide
|
e
|
隐藏tooltip
|
update
|
content
|
更新tooltip内容
|
reposition
|
none
|
重置tooltip位置
|
destroy
|
none
|
销毁tooltip
|