Tooltip(提示框)组件
Posted 古兰精
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Tooltip(提示框)组件相关的知识，希望对你有一定的参考价值。
<!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‘;
以上是关于Tooltip(提示框)组件的主要内容，如果未能解决你的问题，请参考以下文章