EasyUI系列学习(六)-Tooltip（提示框）_html/css_WEB-ITnose

一、创建组件

Hover me     $(function () {        $("#tBox").tooltip({            showDelay: 1000,            hideDelay: 2000        });    })  

6.showEvent，hideEvent：激活显示/隐藏事件时候的提示框，默认为mouseenter，mouseleave

Hover me     $(function () {        $("#tBox").tooltip({            //鼠标单击是显示提示框            showEvent: "click",            //鼠标双击是隐藏提示框            hideEvent: "dblclick"        });    })  

三、事件

1.onShow，onHide：在显示/隐藏提示框的时候触发

Hover me     $(function () {        $("#tBox").tooltip({            onShow: function (e) {                alert("显示提示框的触发");            },            onHide: function (e) {                alert("隐藏提示框的触发");            }        });    })  

2.onUpdate：在提示框内容更新时触发，默认content为null

Hover me     $(function () {        $("#tBox").tooltip({            content: "这是新内容",            onUpdate: function (content) {                alert("内容被更新:" + content);            }        });    })  

3.onPosition：在提示框位置被改变的时候触发

Hover me     $(function () {        $("#tBox").tooltip({            onPosition: function (left, top) {                console.log("left:" + left + ",top:" + top);            }        });    })  

4.onDestroy：在提示框被撤销的时候触发

Hover me     $(function () {        $("#tBox").tooltip({            onDestroy: function (none) {                alert("提示框被销毁");            }        });        $("#tBox").click(function () {            $(this).tooltip("destroy");        });    })  

四、方法

1.options：返回属性对象

2.show，hide：显示/隐藏提示框

Hover me     $(function () {        $("#tBox").tooltip({        });        $("#tBox").tooltip("show");        $("#tBox").tooltip("hide");    })  

3.update：更新content的内容

Hover me     $(function () {        $("#tBox").tooltip({        });        //鼠标移动到”Hover me“时触发        $("#tBox").tooltip("update", "更新的内容");    })  

4.tip：返回tip元素对象；arraw返回箭头元素对象（实际就是提示框生成的两个div）

Hover me     $(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"));            }        });    })  

5.reposition：重置提示框位置

Hover me     $(function () {        $("#tBox").tooltip({            onShow: function () {                $(".tooltip-bottom").css("left", 500);            },            onHide: function () {                $("#tBox").tooltip("reposition");            }        });    })  

五、组件默认值

$.fn.tooltip.defaults.position = "right"; 

查看更多关于EasyUI系列学习(六)-Tooltip（提示框）_html/css_WEB-ITnose的详细内容...