EasyUI中ToolTip提示框的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中ToolTip提示框的简单使用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
效果
屬性
| 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 | 引發(fā)提示框（tooltip）出現(xiàn)的事件。 | mouseenter |
| hideEvent | string | 引發(fā)提示框（tooltip）消失的事件。 | mouseleave |
| showDelay | number | 顯示提示框（tooltip）的時間延遲。 | 200 |
| hideDelay | number | 隱藏提示框（tooltip）的時間延遲。 | 100 |
事件
| onShow | e | 當顯示提示框（tooltip）時觸發(fā)。 |
| onHide | e | 當隱藏提示框（tooltip）時觸發(fā)。 |
| onUpdate | content | 當提示框（tooltip）內容更新時觸發(fā)。 |
| onPosition | left,top | 當提示框（tooltip）位置改變時觸發(fā)。 |
| onDestroy | none | 當提示框（tooltip）銷毀時觸發(fā)。 |
方法
| 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）。 |
實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>
<script type="text/javascript">$('#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'});}});
</script>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的EasyUI中ToolTip提示框的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Messager消息框的简
- 下一篇： Thymeleaf中使用select进行