Tooltip(提示框)元件
阿新 • • 發佈：2019-01-30
<!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> <script type="text/javascript" src="js/index.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" /> </head> <body> <a href="##" id="box">toolTip</a> </body> </html>
$(function () { $('#box').tooltip({ content : 'fghjkl',//提示的內容 position:'top' //訊息框的位置left top bottom trackMouse:true //允許提示框跟著滑鼠移動 deltaX:0 //水平方向提示框位置 deldaY:0 //豎直方向提示框位置 showEvent:'click'//當啟用事件的時候顯示提示框 hideEvent:'dbclick'//當啟用事件的時候隱藏提示框 showDelay:500,//延遲多長時間顯示 hideDelay:500,//延遲多長事件隱藏 onShow: function(e){}//顯示的時候觸發 onHide:function(e){}//隱藏的時候觸發 onUpdate:function(e){}//內容更新的時候觸發 onPosition:function(left,top){}//改變位置的時候觸發 onDestroy:function(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.position = 'top';