EasyUI jQuery tooltip widget

In this article, we will learn how to design a tooltip widget using jQuery EasyUI. EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Download EasyUI for jQuery:

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

Syntax:

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

});

Properties:

position: This property is the tooltip position.
content: This property is the tooltip content.
trackMouse: This property enables the tooltip to move along with the mouse.
deltaX: This property is the horizontal distance from the tooltip position.
deltaY: This property is the vertical distance from the tooltip position.
showEvent: This property enables the tooltip to appear.
hideEvent: This property enables the tooltip to disappear.
showDelay: This property is the time delay to show the tooltip.
hideDelay: This property is the time delay to hide the tooltip.

Methods:

destroy: This method destroys the tooltip.
reposition: This method reset the tooltip position.
update: This method update the tooltip content.
hide: This method hides the tooltip.
show: This method displays the tooltip
arrow: This method returns the arrow object.
tip: This method return the tip object.
options: This returns the options property.

Event:

onDestroy: This event fires when the tooltip is destroyed.
onPosition: This event fires when the tooltip position is changed.
onUpdate: This event fires when the tooltip content is updated.
onHide: This event fires when hiding the tooltip.
onShow: This event fires when the tooltip is shown.

CDN Links: First, add jQuery Easy UI scripts needed for your project.

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

Example:

HTML

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

Output:

Reference: http://www.jeasyui.com/documentation/

Article Tags :

JQuery

Web Technologies

EasyUI

EasyUI-Base