我們都知道DOM節點的title屬性，Tooptip組件就是比較強大的title，它可以自由的設置自己的樣式、位置以及有自己相關的觸發事件。
示例：
<!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>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
$.fn.tooltip.defaults.position = 'top'; //重寫屬性的默認值
$('#box').tooltip({
//tooltip屬性
content : '<strong>經緯恆潤科技</strong>', //提示框內容,支持html格式
position : 'right', //消息框位置,默認bootom,還有left、right、top
trackMouse : true, //當爲true時，允許提示框跟隨鼠標移動，默認爲false
deltaX : 0, //水平方向位置調整參數
deltaY : 0, //垂直方向位置調整參數
showEvent : 'mouseenter', //當激活事件的時候顯示提示框,默認mouseenter
hideEvent : 'mouseleave', //當激活事件的時候隱藏提示框,默認mouseleave
showDelay : 500, //延長多少ms顯示提示框 默認200
hideDelay : 500, //延長多少ms隱藏提示框 默認200
//toolpit事件
onShow : function (e) {
//alert('顯示的時候觸發！');
console.log($('#box').tooltip('tip'));
console.log($('#box').tooltip('arrow'));
$('.tooltip-bottom').css('left', 500);
},
onHide : function (e) {
//alert('隱藏的時候觸發！');
$('#box').tooltip('reposition');
},
onUpdate : function (cc) {
//alert('提示框內容更新的時候觸發：' + content);
},
onPosition : function (left, top) {
console.log('left:' + left + ',top:' + top);
},
onDestroy : function (e) {
alert('提示框被銷燬的時候觸發！');
},
});
//tooptip方法：
$('#box').click(function () {
$(this).tooltip('update', '<font color="red" style="font-weight:bold;font-style:italic;" >恆潤科技</font>'); //改變提示框內容
//$(this).tooltip('destroy'); //銷燬提示框
});
console.log($('#box').tooltip('options').content);
//$('#box').tooltip('show'); //顯示
//$('#box').tooltip('hide'); //隱藏
});
</script>
</head>
<body style="margin:100px;">
<a href="###" title="這是title提示框">Hirain</a>
</br></br></br></br></br>
<a href="###" id="box">Hirain</a>
</br></br></br></br></br>
</body>
</html>
<!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>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
$(function () {
var data = [
{A:'name1',B:150,C:135,D:285,E:97},
{A:'name2',B:59,C:96,D:155,E:167},
{A:'name3',B:83,C:86,D:169,E:53},
{A:'name4',B:66,C:61,D:127,E:158}
];
$('#dg').datagrid({
columns:[[
{field:'A',title:'A',width:100,formatter:formatA},
{field:'B',title:'B',width:100},
{field:'C',title:'C',width:100},
{field:'D',title:'D',width:100}
]],
data: data,
onLoadSuccess:function(){
createTooltip();
}
});
function formatA(value,row,index){
return '<span data-p1='+index+' class="easyui-tooltip">' + value + '</span>';
}
function createTooltip(){
$('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){
var index = parseInt($(this).attr('data-p1'));
$(this).tooltip({
content: $('<div></div>'),
onUpdate: function(cc){
var row = $('#dg').datagrid('getRows')[index];
var content = '<div>content</div><ul>';
content += '<li>name: '+row.A+'</li>';
content += '<li>B: '+row.B+'</li>';
content += '<li>C: '+row.C+'</li>';
content += '<li>D: '+row.D+'</li>';
content += '</ul>';
cc.panel({
width:200,
content:content
});
},
position:'right'
});
});
}
})
</script>
</head>
<body>
<table id="dg" style="width:400px;height:200px"></table>
</body>
</html>
