jQuery EasyUI 基礎插件– Tooltip 提示框
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插件