标签：
一、创建组件
0.Tooltip不依赖其他组件
1.使用class加载
<a href="#" class="easyui-tooltip" title="这是一个提示信息">Hover me</a>
2.使用js加载
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip(); }) </script>
二、属性
1.position：消息框位置（left，right，top，默认bottom）
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip(); }) </script>
2.content：消息框内容，可以是html
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ content: "<strong>我是html</strong>" }); }) </script>
3.trackMouse：为true时，允许提示框跟鼠标移动
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ trackMouse: true }); }) </script>
4.deltaX，deltaY：提示框具体左上角的位置
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ deltaX: 50, deltaY:50 }); }) </script>
5.showDelay，hideDelay延时多少毫秒显示/隐藏提示框，默认是200
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ showDelay: 1000, hideDelay: 2000 }); }) </script>
6.showEvent，hideEvent：激活显示/隐藏事件时候的提示框，默认为mouseenter，mouseleave
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ //鼠标单击是显示提示框 showEvent: "click", //鼠标双击是隐藏提示框 hideEvent: "dblclick" }); }) </script>
三、事件
1.onShow，onHide：在显示/隐藏提示框的时候触发
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ onShow: function (e) { alert("显示提示框的触发"); }, onHide: function (e) { alert("隐藏提示框的触发"); } }); }) </script>
2.onUpdate：在提示框内容更新时触发，默认content为null
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ content: "这是新内容", onUpdate: function (content) { alert("内容被更新:" + content); } }); }) </script>
3.onPosition：在提示框位置被改变的时候触发
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ onPosition: function (left, top) { console.log("left:" + left + ",top:" + top); } }); }) </script>
4.onDestroy：在提示框被撤销的时候触发
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ onDestroy: function (none) { alert("提示框被销毁"); } }); $("#tBox").click(function () { $(this).tooltip("destroy"); }); }) </script>
四、方法
1.options：返回属性对象
2.show，hide：显示/隐藏提示框
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ }); $("#tBox").tooltip("show"); $("#tBox").tooltip("hide"); }) </script>
3.update：更新content的内容
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ }); //鼠标移动到”Hover me“时触发 $("#tBox").tooltip("update", "更新的内容"); }) </script>
4.tip：返回tip元素对象；arraw返回箭头元素对象（实际就是提示框生成的两个div）
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ onShow: function () { //div.tooltip.tooltip-bottom console.log($("#tBox").tooltip("tip")); //div.tooltip.tooltip-outer,div.tooltip-arrow console.log($("#tBox").tooltip("arrow")); } }); }) </script>
5.reposition：重置提示框位置
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a> <script> $(function () { $("#tBox").tooltip({ onShow: function () { $(".tooltip-bottom").css("left", 500); }, onHide: function () { $("#tBox").tooltip("reposition"); } }); }) </script>
五、组件默认值
$.fn.tooltip.defaults.position = "right";
标签：
原文地址：http://www.cnblogs.com/2star/p/5199418.html
