当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。
1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,不需要任何的 javascript 代码。
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
2、使用 javascript 创建提示框(Tooltip)。
$('#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 |