jQuery EasyUI 基础插件 - Tooltip 提示框

jQuery EasyUI 插件 jQuery EasyUI 插件

通过 $.fn.tooltip.defaults 重写默认的 defaults。

当用户移动鼠标指针在某个元素上时，出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

用法

创建提示框（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'
        });
    }
});

属性

名称 类型 描述默认值
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）。
jQuery EasyUI 插件 jQuery EasyUI 插件