jQuery EasyUI 基础插件 – Tooltip 提示框

优质
小牛编辑
132浏览
2023-12-01
pre { white-space: pre-wrap; } jQuery EasyUI 插件

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

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

用法

创建提示框(Tooltip)

1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,不需要任何的 javascript 代码。

<a href="#" title="This is the tooltip message.">Hover me</a>

2、使用 javascript 创建提示框(Tooltip)。

<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
    position: 'right',
    content: '<span>This is the tooltip message.</span>',
    onShow: function(){
        $(this).tooltip('tip').css({
            backgroundColor: '#666',
            borderColor: '#666'
        });
    }
});

属性

名称类型描述默认值
positionstring提示框(tooltip)位置。可能的值:'left'、'right'、'top'、'bottom'。bottom
contentstring提示框(tooltip)内容。null
trackMouseboolean如果设置为 true,提示框(tooltip)会随着鼠标移动。false
deltaXnumber提示框(tooltip)位置的水平距离。0
deltaYnumber提示框(tooltip)位置的垂直距离。0
showEventstring引发提示框(tooltip)出现的事件。mouseenter
hideEventstring引发提示框(tooltip)消失的事件。mouseleave
showDelaynumber显示提示框(tooltip)的时间延迟。200
hideDelaynumber隐藏提示框(tooltip)的时间延迟。100

事件

名称参数描述
onShowe当显示提示框(tooltip)时触发。
onHidee当隐藏提示框(tooltip)时触发。
onUpdatecontent当提示框(tooltip)内容更新时触发。
onPositionleft,top当提示框(tooltip)位置改变时触发。
onDestroynone当提示框(tooltip)销毁时触发。

方法

名称参数描述
optionsnone返回选项(options)属性(property)。
tipnone返回提示(tip)对象。
arrownone返回箭头(arrow)对象。
showe显示提示框(tooltip)。
hidee隐藏提示框(tooltip)。
updatecontent更新提示框(tooltip)内容。
repositionnone重置提示框(tooltip)位置。
destroynone销毁提示框(tooltip)。
jQuery EasyUI 插件