<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<a href="##" id="box">toolTip</a>
</body>
</html>
$(function () {
$('#box').tooltip({
content : 'fghjkl',//提示的内容
position:'top' //消息框的位置left top bottom
trackMouse:true //允许提示框跟着鼠标移动
deltaX: //水平方向提示框位置
deldaY: //竖直方向提示框位置
showEvent:'click'//当激活事件的时候显示提示框
hideEvent:'dbclick'//当激活事件的时候隐藏提示框
showDelay:,//延迟多长时间显示
hideDelay:,//延迟多长事件隐藏
onShow: function(e){}//显示的时候触发
onHide:function(e){}//隐藏的时候触发
onUpdate:function(e){}//内容更新的时候触发
onPosition:function(left,top){}//改变位置的时候触发
onDestroy:function(none){}//被销毁的时候触发
});
//返回属性对象
console.log($('#box').tooltip('options'));
//显示提示框
$('#box').tooltip('show');
//隐藏提示框
$('#box').tooltip('hide');
//更新content 内容
$('#box').tooltip('update', '更新提示内容');
//返回tip 元素对象
onShow : function () {
console.log($('#box').tooltip('tip'));
},
//返回箭头元素对象
onShow : function () {
console.log($('#box').tooltip('arrow'));
},
//销毁提示框
$('#box').tooltip('destroy');
//重置工具栏位置
onShow : function (e) {
$('.tooltip-right').css('left', );
},
onHide : function (e) {
$('#box').tooltip('reposition');
},
$.fn.tooltip.defaults.position = 'top';
使用$.fn.tooltip.defaults重写默认值对象。（译者注：1.3.3版中新增的plugin）
当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
使用案例：
创建提示框
通过标签和Javascript两种方法来创建提示框。
1、通过标签创建提示框，给元素添加一个”easyui-tooltip”的类名，无需任何Javascript代码。
<a href=”#” title=”This is the tooltip message.” class=”easyui-tooltip”>Hover me</a>
2. 通过Javascript创建提示框。
<a id=”dd” href=”javascript:void(0)”>Click here</a>
$(‘#dd’).tooltip({
position: ‘right’,
content: ‘<span style=”color:#fff”>This is the tooltip message.</span>’,
onShow: function(){
$(this).tooltip(‘tip’).css({
backgroundColor: ‘#666′,
borderColor: ‘#666′
});
}
});
属性：
事件：
方法：
