1. 程式人生 > >easyui Tooltip 提示框

easyui Tooltip 提示框

通過 $.fn.tooltip.defaults 重寫預設的 defaults。

當用戶移動滑鼠指標在某個元素上時,出現提示資訊視窗用來顯示額外資訊。提示內容可以包含任何來自頁面的或者通過 ajax 生成的 html 元素。

用法

建立提示框(Tooltip)

1、從標記建立提示框(Tooltip),新增 'easyui-tooltip' class 到元素,不需要任何的 javascript 程式碼。

  1. <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

事件

名稱 引數 描述
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)。