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		提示框（tooltip）内容。	null
trackMouse	boolean	如果設定為 true，提示框（tooltip）會随着滑鼠移動。	false
deltaX	number	提示框（tooltip）位置的水準距離。
deltaY		提示框（tooltip）位置的垂直距離。
showEvent		引發提示框（tooltip）出現的事件。	mouseenter
hideEvent		引發提示框（tooltip）消失的事件。	mouseleave
showDelay		顯示提示框（tooltip）的時間延遲。	200
hideDelay		隐藏提示框（tooltip）的時間延遲。	100

事件

	參數
onShow	e	當顯示提示框（tooltip）時觸發。
onHide		當隐藏提示框（tooltip）時觸發。
onUpdate		當提示框（tooltip）内容更新時觸發。
onPosition	left,top	當提示框（tooltip）位置改變時觸發。
onDestroy	none	當提示框（tooltip）銷毀時觸發。

方法

options		傳回選項（options）屬性（property）。
tip		傳回提示（tip）對象。
arrow		傳回箭頭（arrow）對象。
show		顯示提示框（tooltip）。
hide		隐藏提示框（tooltip）。
update		更新提示框（tooltip）内容。
reposition		重置提示框（tooltip）位置。
destroy		銷毀提示框（tooltip）。