EasyUI中ToolTip提示框的简单使用

た入场券 2023-10-18 20:09 69阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190619223945334.gif][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>string</td> 
   <td>提示框（tooltip）位置。可能的值：'left'、'right'、'top'、'bottom'。</td> 
   <td>bottom</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>string</td> 
   <td>提示框（tooltip）内容。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>trackMouse</td> 
   <td>boolean</td> 
   <td>如果设置为 true，提示框（tooltip）会随着鼠标移动。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>deltaX</td> 
   <td>number</td> 
   <td>提示框（tooltip）位置的水平距离。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>deltaY</td> 
   <td>number</td> 
   <td>提示框（tooltip）位置的垂直距离。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>showEvent</td> 
   <td>string</td> 
   <td>引发提示框（tooltip）出现的事件。</td> 
   <td>mouseenter</td> 
  </tr> 
  <tr> 
   <td>hideEvent</td> 
   <td>string</td> 
   <td>引发提示框（tooltip）消失的事件。</td> 
   <td>mouseleave</td> 
  </tr> 
  <tr> 
   <td>showDelay</td> 
   <td>number</td> 
   <td>显示提示框（tooltip）的时间延迟。</td> 
   <td>200</td> 
  </tr> 
  <tr> 
   <td>hideDelay</td> 
   <td>number</td> 
   <td>隐藏提示框（tooltip）的时间延迟。</td> 
   <td>100</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>e</td> 
   <td>当显示提示框（tooltip）时触发。</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>e</td> 
   <td>当隐藏提示框（tooltip）时触发。</td> 
  </tr> 
  <tr> 
   <td>onUpdate</td> 
   <td>content</td> 
   <td>当提示框（tooltip）内容更新时触发。</td> 
  </tr> 
  <tr> 
   <td>onPosition</td> 
   <td>left,top</td> 
   <td>当提示框（tooltip）位置改变时触发。</td> 
  </tr> 
  <tr> 
   <td>onDestroy</td> 
   <td>none</td> 
   <td>当提示框（tooltip）销毁时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）属性（property）。</td> 
  </tr> 
  <tr> 
   <td>tip</td> 
   <td>none</td> 
   <td>返回提示（tip）对象。</td> 
  </tr> 
  <tr> 
   <td>arrow</td> 
   <td>none</td> 
   <td>返回箭头（arrow）对象。</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>e</td> 
   <td>显示提示框（tooltip）。</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>e</td> 
   <td>隐藏提示框（tooltip）。</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>content</td> 
   <td>更新提示框（tooltip）内容。</td> 
  </tr> 
  <tr> 
   <td>reposition</td> 
   <td>none</td> 
   <td>重置提示框（tooltip）位置。</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>none</td> 
   <td>销毁提示框（tooltip）。</td> 
  </tr> 
 </tbody> 
</table>

##    实现 ##

<!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>

[Image 1]: 
[20190619223945334.gif]: https://img-blog.csdnimg.cn/20190619223945334.gif