jQuery UI Tooltips hide option - GeeksforGeeks

25 Feb, 2021
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use hide option in jQuery UI tooltip. The hide option is used to add the animation effect while hiding in the tooltip. By default, the value is True.
Syntax:
$( ".selector" ).tooltips(
   { hide : true }
);
Parameters:
Boolean: If set to false, there is no hiding effect.
Number: The time(ms) after which the tooltips will hide.
String: The string is used for the selected effect for the hiding of the tooltip. The effect will be used for hiding using the default duration and easing.
Object: The tooltip is hidden using an object as a value where effect, easing, duration, and delay properties are provided.
Approach:
First, add jQuery UI scripts needed for your project.
<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Example 1: The following example demonstrates the hide option with Boolean type for the tooltip.
HTML
<!doctype html><html lang="en">   <head>    <meta charset="utf-8">    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"        rel="stylesheet">    <script src=     "https://code.jquery.com/jquery-1.10.2.js">    </script>           <script src=     "https://code.jquery.com/ui/1.10.4/jquery-ui.js">    </script>       <h1 style="color:green;">        GeeksforGeeks    </h1>           <h3>        jQuery UI | Tooltip hide Boolean option    </h3>  </head>  <body>        <p id="p1">    <a href="#" title="This is a tooltip">Tooltips</a>    GeeksforGeeks is a computer science portal</p>      <script>        $(document).ready(function() {            $("#p1").tooltip({                hide: { true }                           });                                       });    </script></body>   </html>
 
Output:
Tooltip hide 
On click of the Tooltips link, we get the following tooltip as output.
This is a tooltip
Example 2: The following example demonstrates the hiding of the tooltip with the explode animation effect with 400 ms of time.                   The use of the explode as String and 400ms as Number option is shown here.
HTML
<!doctype html><html lang="en">   <head>    <meta charset="utf-8">    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"        rel="stylesheet">       <script src="https://code.jquery.com/jquery-1.10.2.js">    </script>       <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">    </script>       <h1 style="color:green;">        GeeksforGeeks    </h1>           <h3>        jQuery UI | Tooltip hide option    </h3>       <script>        $(function () {            $("#gfg1").tooltip({                hide: { effect: "explode", duration: 400 }            });            $("#gfg1").tooltip();            $("#gfg2").tooltip();        });    </script></head>   <body>    <label for="name">Name:</label>    <input id="gfg1" title="GeeksforGeeks">        <p><a id="gfg2" href="" title="GeeksforGeeks">        Click here!    </a></p>  </body>  </html> 
Output:
           
           
Example 3: The following example demonstrates the hiding animation with slideUp option within 200ms of time.
HTML
<!doctype html><html lang="en">   <head>    <meta charset="utf-8">    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"        rel="stylesheet">    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>           <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">    </script>       <h1 style="color: green;">        GeeksforGeeks    </h1>           <h3>        jQuery UI | Tooltip hide SlideUp option    </h3>       <script>        $(function () {            $("#gfg1").tooltip({                hide: { effect: "slideUp", duration: 200 }            });            $("#gfg1").tooltip();            $("#gfg2").tooltip();        });    </script></head>   <body>    <label for="name">Name:</label>    <input id="gfg1" title="GeeksforGeeks">        <p><a id="gfg2" href="" title="GeeksforGeeks">        Click here!    </a></p>  </body>   </html>           
Output:
         
Reference: https://api.jqueryui.com/category/widgets/
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-UI
HTML
JQuery
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
JQuery | Set the value of an input text field
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to add options to a select element using jQuery?
Form validation using jQuery
Scroll to the top of the page using JavaScript/jQuery