easyUI tootip组件使用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test006.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head> <body style="margin:20px">
<a class="easyui-tooltip" herf="#" title="this is title">hover on</a>
<a href="#" id="box">hover 2 on</a>
<div id="pox" style="border: 1px solid #ccc;width:200px;height:200px">div hover 2 on</div>
</body> </html>
$(function(argument) {
var obj = {
content: '<strong>this is content</strong>', //tooltip显示的内容，支持html语法
// position:'top',//toptip显示的位置；
trackMouse: true, //追踪鼠标位置,如果position是top，跟踪鼠标的时候可能会使位置变成bottom；
// deltaX: 100, //与鼠标x轴方向的偏移
// deltaY: 100,
// showDelay: 1500, //显示的延迟时间
// hideDelay: 1500,
// showEvent:'click',//显示tooltip的事件
// hideEvent:'dblclick',//隐藏tooltip的事件,dblclick-双击隐藏
onShow: function(e) {
console.log('onShow');
console.log($(this).tooltip('options')); //获得options对象
console.log($(this).tooltip('tip')); //获得tip对象
console.log($(this).tooltip('arrow')); //获得arrow对象
$(this).tooltip('hide'); //隐藏
$(this).tooltip('show'); //显示
$(this).tooltip('update', 'this is update content'); //更新content内容；
$(this).tooltip('reposition');
// $(this).tooltip('destroy'); //销毁tooltip对象
},
onHide: function(e) {
console.log('onHide');
},
onUpdate: function(e) {
console.log('onUpdate');
},
onPosition: function(left, top) {
console.log('onPosition');
console.log('left:' + left + ";top:" + top);
},
onDestroy: function(e) {
console.log('onDestroy');
}
};
$('#box').tooltip(obj);
$('#pox').tooltip(obj);
});