easyUI基础-tooltip提示框
巫晋鹏
通过 $.fn.tooltip.defaults 重写默认的 defaults。
当用户移动鼠标指针在某个元素上时，出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。
这个组件不依赖于其他组件。
属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| position | string | 消息框位置。可用值有："left","right","top","bottom" | bottom |
| content | string | 消息框内容。 | null |
| trackMouse | boolean | 为true时，允许提示框跟着鼠标移动。 | false |
| deltaX | number | 水平方向提示框的位置。 | 0 |
| deltaY | number | 垂直方向提示框的位置。 | 0 |
| showEvent | string | 当激发什么事件的时候显示提示框。 | mouseenter |
| hideEvent | string | 当激发什么事件的时候隐藏提示框。 | mouseleave |
| showDelay | number | 延时多少秒显示提示框。 | 200 |
| hideDelay | number | 延时多少秒隐藏提示框。 | 100 |
事件
| 事件名称 | 事件参数 | 描述 |
|---|---|---|
| onShow | e | 在显示提示框的时候触发。 |
| onHide | e | 在隐藏提示框的时候触发。 |
| onUpdate | content | 在提示框内容更新的时候触发。 |
| onPosition | left,top | 在提示框位置改变的时候触发。 |
| onDestroy | none | 在提示框被销毁的时候触发。 |
方法
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回控件属性对象。 |
| tip | none | 返回tip元素对象。 |
| arrow | none | 返回箭头元素对象。 |
| show | e | 显示提示框。 |
| hide | e | 隐藏提示框。 |
| update | content | 更新提示框内容。 |
| reposition | none | 重置提示框位置。 |
| destroy | none | 销毁提示框。 |
用法
创建提示框（Tooltip）
1、从标记创建提示框（Tooltip），添加 'easyui-tooltip' class 到元素，不需要任何的 javascript 代码。
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>2、使用 javascript 创建提示框（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'
});
}
});二、属性
1.position：消息框位置（left，right，top，默认bottom）
<a href="#" id="tBox" title="这是一个提示信息">Hover me</a>
<script>
$(function () {
$("#tBox").tooltip({
position:"right"
});
})
</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>
7.总体
$('#box').tooltip({
position : 'top',// position string 消息框位置。 默认 bootom， 还有 left、 right、 top
content : '这里可以输入提示内容', //content string 消息框内容。默认为 null，可以包含 html 标签
trackMouse : true, //trackMouse boolean 为true时， 允许提示框跟随鼠标移动。 默认为false
deltaX : 100, //deltaX number 水平方向提示框的位置。默认为 0
deltaY : 100, //deltaY number 垂直方向提示框的位置。默认为 0
showEvent : 'click', //showEvent string 当激活事件的时候显示提示框。 默认为 mouseenter
hideEvent : 'dblclick', //hideEvent string 当激活事件的时候显示提示框。 默认为 mouseleave
showDelay : 500,//showDelay number 延时多少秒显示提示框。默认 200
hideDelay : 500, //hideDelay number 延时多少秒隐藏提示框。默认 100
});三、事件
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>总体：
$('#box').tooltip({
content : '这里可以输入提示内容',
onShow : function (e) {
alert('显示提示框的触发');
},
onHide : function (e) {
alert('隐藏提示框的触发');
},
onUpdate : function (content) {
alert('内容更新为：' + content);
},
onPosition : function (left,top) {
console.log('left:' + left + ',top:' + top);
},
onDestroy : function (none) {
alert('提示框被销毁的时候触发');
},
});四、方法
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>总体：
//返回属性对象
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');
},
PS：我们可以使用$.fn.tooltip.defaults 重写默认值对象。
$.fn.tooltip.defaults.position = 'top';五、组件默认值
$.fn.tooltip.defaults.position = "right";
类似资料：