EasyUI中ToolTip提示框的简单使用
生活随笔
收集整理的这篇文章主要介绍了
EasyUI中ToolTip提示框的简单使用
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
场景
效果
属性
| 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）。 |
实现
<!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消息框的简
- 下一篇： select设置默认文字，不出现在下拉框