# 加载方式 ## Class加载 ``` <a class="easyui-tooltip" title="我是百度提示框" href="http://www.baidu.com">百度</a> ``` ## JS调用加载 ``` <a id="box" href="http://www.baidu.com">百度百度百度百度</a> <script> $(function () { $('#box').tooltip({ // 消息框位置 position: 'right', // 消息框内容 content:'百度提示框', // 为true时，允许提示框跟随鼠标移动。 trackMouse:true, // 水平方向提示框的位置 deltaX:100, // 垂直方向提示框的位置 deltaY:100, // 如何激活显示事件(click点击激活) showEvent:'click', // 如何激活隐藏事件(dbclick点击激活) hideEvent:'dbclick', // 延时多少秒显示提示框 showDelay:300, // 延时多少秒隐藏提示框 hideDelay:500 }); }); </script> ``` # 属性列表 |属性名 | 值 | 说明| |---|--- | ---| |position | string | 消息框位置。默认 bootom，还有 left、right、top| |content | string | 消息框内容。默认为 null，可以包含 html 标签| |trackMouse | boolean | 为true时，允许提示框跟随鼠标移动。默认为false| |deltaX | number | 水平方向提示框的位置。默认为 0| |deltaY | number | 垂直方向提示框的位置。默认为 0| |showEvent | string | 当激活事件的时候显示提示框。默认为 mouseenter| |hideEvent | string | 当激活事件的时候显示提示框。默认为 mouseleave| |showDelay | number | 延时多少秒显示提示框。默认 200| |hideDelay | number | 延时多少秒隐藏提示框。默认 100| ## 事件列表 |事件名 | 传参 | 说明| |---|--- | ---| |onShow | e | 在显示提示框的时候触发| |onHide | e | 在隐藏提示框的时候触发| |onUpdate | content | 在提示框内容更新的时候触发| |onPosition | left、top | 在提示框位置改变的时候触发| |onDestroy | none | 在提示框被销毁的时候触发| ## 方法列表 |方法名 | 传参 | 说明| |---|--- | ---| |options | none | 返回属性对象| |tip | none | 返回 tip 元素对象| |arrow | none | 返回箭头元素对象| |show | e | 显示提示框| |hide | e | 隐藏提示框| |update | content | 更新提示框内容| |reposition | none | 重置提示框位置| |destroy | 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', 500); }, onHide : function (e) { $('#box').tooltip('reposition'); }, // 可以使用$.fn.tooltip.defaults 重写默认值对象。 $.fn.tooltip.defaults.position = 'top'; ```