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;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); });