场景

效果

EasyUI中ToolTip提示框的简单使用_tooltip

属性

名称

类型

描述

默认值

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>