easyui Tooltip 提示框
阿新 • • 發佈:2018-12-13
通過 $.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)。
$('#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)。 |