EasyUI-Tooltip（提示框）学习

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

引子：

if($("#BLUETOOTH_a")){
$("#BLUETOOTH_a").tooltip({
position: 'right',
content: '<span style="color:#fff"><s:text name="com.vrv.cems.policy.template.hardware.bluetooth.info"/></span>',
onShow: function(){
$(".tooltip-arrow").css("border-right-color","#666");
$(".tooltip").css({"background-color":"#666","border-color":"#666"});
//$(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'});
}
});
}

其中$(this).tooltip('tip')在IE、谷歌下均可以获取到jquery对象，但是在火狐下会报错，所以提示框会是默认的样式，导致显示不了提示的字。

一、创建组件

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: ,
deltaY:
});
})
</script>

5.showDelay，hideDelay延时多少毫秒显示/隐藏提示框，默认是200

<a href="#" id="tBox" title="这是一个提示信息">Hover me</a>
<script>
$(function () {
$("#tBox").tooltip({
showDelay: ,
hideDelay:
});
})
</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", );
},
onHide: function () {
$("#tBox").tooltip("reposition");
}
});
})
</script>

五、组件默认值

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