EasyUI jQuery tooltip widget
Last Updated :
12 Mar, 2021
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">
<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">
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...