EasyUI jQuery tooltip widget

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个工具提示小部件。EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量的时间。

下载EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

语法:

var a = $(".selector").tooltip({
});

属性:

position。这个属性是工具提示的位置。
content。这个属性是工具提示的内容。
trackMouse。这个属性可以使工具提示随着鼠标的移动而移动。
deltaX: 这个属性是与工具提示位置的水平距离。
deltaY: 这个属性是与工具提示位置的垂直距离。
showEvent。此属性使工具提示出现。
hideEvent。该属性使工具提示消失。
showDelay:这个属性是显示工具提示的时间延迟。
hideDelay:这个属性是隐藏工具提示的时间延迟。

方法:

destroy。该方法将销毁工具提示。
reposition。该方法重置工具提示的位置。
update: 该方法更新工具提示内容。
hide。该方法隐藏了工具提示。
display。该方法显示工具提示
arrow。该方法返回箭头对象。
tip: 该方法返回提示对象。
options。这将返回options属性。

事件:

onDestroy:该事件在工具提示被销毁时触发。
onPosition。当工具提示的位置改变时，该事件就会触发。
onUpdate：当工具提示的内容被更新时，该事件就会发生。
onHide。该事件在隐藏工具提示时触发。
onShow : 该事件在工具提示显示时触发。

CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="initial-scale=1.0, maximum-scale=1.0,
                   user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
          href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
          href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
            src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
            src="jquery.easyui.mobile.js"> 
    </script> 
  
    <h1>GeeksforGeeks</h1>
    <h3>Easy UI | tooltip widget</h3>
</head> 
  
<body>     
    <a href="#" title="This is the tooltip message." 
       class="easyui-tooltip">
          Hover me
    </a>
</body>
</html>

输出:

EasyUI jQuery tooltip widget