tooltip提示框组件
Posted guoDaXia的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tooltip提示框组件相关的知识，希望对你有一定的参考价值。
Tooltip 提示框组件
可独立于其他组件
通过$.fn.tooltip.defaults重写默认的defaults。
当用户移动鼠标指针在某个元素上时，出现提示信息窗口来显示额外信息。提示内容可以包含任何来自页面的或者通过ajax生成的html元素。
1、创建提示框
从标记创建提示框（tooltip），添加‘easyui-tooltip’ class到元素，不需要任何的javascript代码
<a href="#" title="This is the tooltip message." class="rasyui-tooltip">Hover me</a>
使用js创建提示框（tooltip）
<a id="dd" href="javascript:void(0)">Click here</a>
$("#dd").tooltip({
position:‘right‘,
content: ‘<span style="color:#fff">This is the tooltip message.</span>‘,
onShow:function(){
$(this).tooltip(‘tip‘).css({
backgroundColor:"#666",
borderColor:"#666"
});
}
});
2、属性
position string 提示框（tooltip）位置。可能的值：‘left’，‘right’，‘top’，‘bottom’ bottom
content string 提示框（tooltip）内容,可以放html标签 null
trackMouse boolean 如果设置为true，提示框（tooltip）会随着鼠标移动 false
deltaX number 提示框（tooltip）位置的水平距离 0
deltaY number 提示框（tooltip）位置的垂直距离 0
showEvent string 引发提示框（tooltip）出现的事件 mouseenter
hideEvent string引发提示框（tooltip）消失的事件 mouseleave
showDelay number 显示提示框（tooltip）的时间延迟 200
hideDelay number 隐藏提示框（tooltip）的时间延迟 100
3、事件
onShow e 当显示提示框（tooltip）时触发
onHide e 当隐藏提示框（tooltip）时触发
onUpdate content 当提示框（tooltip）内容更新时触发
onPosition left，top 当提示框（tooltip）位置更改时触发
onDestory none 当提示框（tooltip）销毁时触发
4、方法
options none 返回选项（options）属性（property）
tip none 返回提示（tip）对象
arrow none 返回箭头（arrow）对象
show e 显示提示框（tooltip）
hide e 隐藏提示框（tooltip）
update content 更新提示框（tooltip）内容
reposition none 重置提示框（tooltip）位置
destory none 销毁提示框（tooltip）
<html> <title>index</title> <head> <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> <div style="width:400px;height:400px; margin-left:400px; margin-top:100px;"> <!-- <a href="javascript:void(0)" title="This is the tooltip message" class="easyui-tooltip">Hover me</a> --> <a id="box" href="javascript:void(0)">Hover me</a> </div> </body> </html> $(function(){ $.fn.tooltip.defaults.trackMouse = true; $("#box").tooltip({ //position : "right", content : "<strong>this is comment!</strong>", //trackMouse : true, //deltaX : 30, //deltaY : 30, //showEvent : "click", //单击 //hideEvent : "dblclick", //双击 //showDelay : 1500, //单位毫秒 //hideDelay : 1500, //onShow : function(e){ //console.log("提示框显示"); //console.log($("#box").tooltip(‘tip‘)); //console.log($("#box").tooltip(‘arrow‘)); //$(".tooltip-bottom").css(‘left‘,900); //}, //onHide : function(e){ //console.log("提示框隐藏"); //}, //onPosition : function(left , top){ //console.log("提示框移动"); //}, onDestory : function(e){ console.log("提示框销毁"); }, //onUpdate : function(content){ //console.log("新的提示框内容：" + content); //} }); //$("#box").click(function(){ //$(this).tooltip(‘update‘,‘改变了‘); //}); //$("#box").click(function(){ //$(this).tooltip(‘reposition‘); //$(this).tooltip(‘destory‘); //}); //console.log($("#box").tooltip("options")); //$("#box").tooltip("show"); //$("#box").tooltip("hide"); });
我使用$("#box").tooltip(‘destory‘);销毁提示框的时候总是报错
以上是关于tooltip提示框组件的主要内容，如果未能解决你的问题，请参考以下文章