# 加載方式 ## 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'; ```