EasyUI中ToolTip提示框的简单使用

最新推荐文章于 2022-02-14 20:45:00 发布

霸道流氓气质

最新推荐文章于 2022-02-14 20:45:00 发布

阅读量1.6k

点赞数

分类专栏：前端那些骚操作文章标签： tooltip

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92850378

版权

前端那些骚操作专栏收录该内容

470 篇文章 16 订阅

订阅专栏

场景

效果

属性

名称	类型	描述	默认值
position	string	提示框（tooltip）位置。可能的值：'left'、'right'、'top'、'bottom'。	bottom
content	string	提示框（tooltip）内容。	null
trackMouse	boolean	如果设置为 true，提示框（tooltip）会随着鼠标移动。	false
deltaX	number	提示框（tooltip）位置的水平距离。	0
deltaY	number	提示框（tooltip）位置的垂直距离。	0
showEvent	string	引发提示框（tooltip）出现的事件。	mouseenter
hideEvent	string	引发提示框（tooltip）消失的事件。	mouseleave
showDelay	number	显示提示框（tooltip）的时间延迟。	200
hideDelay	number	隐藏提示框（tooltip）的时间延迟。	100

事件

名称	参数	描述
onShow	e	当显示提示框（tooltip）时触发。
onHide	e	当隐藏提示框（tooltip）时触发。
onUpdate	content	当提示框（tooltip）内容更新时触发。
onPosition	left,top	当提示框（tooltip）位置改变时触发。
onDestroy	none	当提示框（tooltip）销毁时触发。

方法

名称	参数	描述
options	none	返回选项（options）属性（property）。
tip	none	返回提示（tip）对象。
arrow	none	返回箭头（arrow）对象。
show	e	显示提示框（tooltip）。
hide	e	隐藏提示框（tooltip）。
update	content	更新提示框（tooltip）内容。
reposition	none	重置提示框（tooltip）位置。
destroy	none	销毁提示框（tooltip）。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>
<script type="text/javascript">
    $('#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'
            });
        }
    });
</script>
</body>
</html>