第 6 章 Tooltip(提示框)组件

学习要点:

1.加载方式

2.属性列表

3.事件列表

4.方法列表

本节课重点了解EasyUI中Tooltip(提示框)组件的使用方法，这个组件不依赖于其他组件。 

一.加载方式
//class 加载方式
<a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me</a>

//JS 加载调用
 $('#box').tooltip({
    content : '这里可以输入提示内容', 
});

二.属性列表

Tooltip 属性

属性名	值	说明
position	string	消息框位置。默认 bootom，还有 left、right、top
content	string	消息框内容。默认为 null，可以包含 html 标签
trackMouse	boolean	为 true 时，允许提示框跟随鼠标移动。默认为 false
deltaX	number	水平方向提示框的位置。默认为 0
deltaY	number	垂直方向提示框的位置。默认为 0
showEvent	string	当激活事件的时候显示提示框。默认为 mouseenter
hideEvent	string	当激活事件的时候显示提示框。默认为 mouseleave
showDelay	number	延时多少秒显示提示框。默认 200
hideDelay	number	延时多少秒隐藏提示框。默认 100

//属性设置
$('#box').tooltip({
    position: 'top',
    content: '这里可以输入提示内容',
    trackMouse: true,
    deltaX: 100,
    deltaY: 100,
    showEvent: 'click',
    hideEvent: 'dblclick',
    showDelay: 500,
    hideDelay: 500,
});

三.事件列表

Tooltip 事件

事件名	传参	说明
onShow	e	在显示提示框的时候触发
onHide	e	在隐藏提示框的时候触发
onUpdate	content	在提示框内容更新的时候触发
onPosition	left、top	在提示框位置改变的时候触发
onDestroy	none	在提示框被销毁的时候触发

$('#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('提示框被销毁的时候触发');
    },
});

 

四.方法列表

Tooltip 方法

方法名	传参	说明
options	none	返回属性对象
tip	none	返回 tip 元素对象
arrow	none	返回箭头元素对象
show	e	显示提示框
hide	e	隐藏提示框
update	content	更新提示框内容
reposition	none	重置提示框位置
destroy	none	销毁提示框

//返回属性对象
 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';

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili