jQuery UI Tooltip

To allow customization and to add new themes, the jQuery UI tooltip is used. The jQuery UI tooltip widget thus replaced the native tooltip. It adds tooltip to any element on which the tooltip needs to be displayed. To show and hide the tooltip, a fade animation is provided by default as compared to just toggling the visibility.

Tooltip:

To display a title in the title box next to any element, on hovering the element with a mouse, the Tooltips are used with the element. Tooltip can be used by adding the title attribute to input elements. The value of the title attribute will then be used as a tooltip.

Syntax:

The tooltip() method can be used in two forms.

$(selector, context).tooltip (options) Method

OR

(selector, context).tooltip (“action”, [params]) Method

First Method:

To indicate that a tooltip can be added to an HTML element, the tooltip (options) method is used. The behavior and appearance of the tooltip are defined by the options parameter, which is an object.

Syntax:

$(selector, context).tooltip(options);

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

$(selector, context).tooltip({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option Uses
content To specify the content of a tooltip. The default value is function returning the title attribute.
disabled To disable the tooltip, when set to true. The default value is false.
hide To specify the animation effect when hiding the tooltip. The default value is true.
items To define which items can show tooltips. The default value is [title].
position To define the position of the tooltip with respect to the associated target element. The default value is function returning the title attribute. The possible values of this option are: my, at, of, collision, using, within.
show To specify the way to animate the showing of tooltip. The default value is true.
tooltipClass To be added to the tooltip widget for tooltips such as warnings or errors. It is a class. The default value is null.
track To allow the tooltip follows/tracks the mouse, when set to true. The default value is false.

Example 1:

<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>jQuery UI Tooltip functionality</title>  
<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>  
 
<!-- Javascript -->  
<script>  
$(function() {  
$("#tip-1").tooltip();  
$("#tip-2").tooltip();  
});  
</script>  
</head>  
<body>  
<!-- HTML -->  
<label for="comment">Name:</label>  
<input id="tip-1" title="Write your name here!">  
<p><a id="tip-2" href="#" title="You have a beautiful name!!">  
Tooltip  
</a></p>  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are displaying the tooltip functionality. Here, we are passing no parameters to the tooltip() method. Here, both the input box and the href attribute has a tooltip attached to them.

Example 2:

<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>jQuery UI Tooltip functionality</title>  
<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>  
<!-- CSS -->  
<style>  
body {  
margin-top: 150px;  
}  
 
.ui-tooltip-content::after, .ui-tooltip-content::before {  
content: "";  
position: absolute;  
border-style: solid;  
display: block;  
left: 130px;  
}  
.ui-tooltip-content::before {  
bottom: -15px;  
border-color: red transparent;  
border-width: 10px 10px 0;  
}  
.ui-tooltip-content::after {  
bottom: -10px;  
border-color: black transparent;  
border-width: 10px 10px 0;  
}  
</style>  
<!-- Javascript -->  
<script>  
$(function() {  
$( "#tip-1" ).tooltip({  
position: {  
my: "center bottom",  
at: "center top-10",  
collision: "none",
}  
});  
});  
</script>  
</head>  
<body>  
<!-- HTML -->  
<label for="name">Password:</label>  
<input id="tip-1" title="Please create a strong password.">  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and behavior of the position option in the tooltip function of jQuery UI.

Example 3:

<!doctype html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>jQuery UI Tooltip functionality</title>  
<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>  
 
<!-- Javascript -->  
<script>  
$(function() {  
$( "#tip-1" ).tooltip({  
content: "<strong>Please write your name here.</strong>",  
track:true  
}),  
$( "#tip-2" ).tooltip({  
disabled: true  
});  
});  
</script>  
</head>  
<body>  
<!-- HTML -->  
<label for="name">Name:</label>  
<input id="tip-1" title="tooltip"><br><br><br>  
<label for="name">Disabled Tooltip:</label>  
<input id="tip-2" title="tooltip">  
</body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are displaying the usage and behavior of the content, track, and disabled options. Here, the first tooltip is enabled, while the second tooltip is disabled.

Second method:

To act on the tooltip elements, the tooltip (action, params) method is used. It can be used to perform actions like disabling the tooltip. The first argument here is “action” which is specified as a string. One or multiple params can also be passed based on the given action and when required.

Syntax:

$(selector, context).tooltip ("action", [params]);

The various actions that can be used with this method are listed below:

Action Uses
close() To close the tooltip. No argument is accepted by this method.
destroy() To eliminate the tooltip functionality completely so that the element return back to its pre-init state. No argument is accepted by this method.
disable() To deactivate the tooltip. No argument is accepted by this method.
enable() To activate the tooltip. No argument is accepted by this method.
open() To programmatically opens the tooltip. No argument is accepted by this method.
option(optionName) To retrieve the value associated with optionName for the tooltip. No argument is accepted by this method.
option() To retrieve an object containing key/value pairs representing the current tooltip options hash. No argument is accepted by this method.
option(optionName, Value) To set the value of the tooltip option associated with the specified optionName.
option(Options) To set one or more options for tooltip.
widget() To get a jQuery object containing the original element. No argument is accepted by this method.

Event methods used with tooltip elements:

For a particular event, the jQueryUI triggers event methods get triggered. The event methods are listed below:

Event Method Uses
create(event,ui) To be triggered when the tooltip is created. The argument event is of type event, and ui is of type object.
close(event,ui) To be triggered when the tooltip is closed. This event usually triggers on focusout or mouseleave. The event argument is of type event, and ui is of type object.
open(event,ui) To be triggered when the tooltip is displayed or shown. This event usually triggers on focusin or mouseover. The event argument is of type event, and ui is of type object.

Example 4:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Tooltip functionality</title>  
      <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>  
      <!-- Javascript -->  
      <script>  
         $(function() {  
            $('.tip-1').tooltip({  
               items: 'a.tip-1',  
               content: 'Hello World!!',  
               show: "slideDown",  
               open: function(event, ui)  
               {  
                  ui.tooltip.hover(  
                  function () {  
                     $(this).fadeTo("slow", 0.2);  
                  });  
               }  
            });  
         });  
         $(function() {  
            $('.tip-2').tooltip({  
               items: 'a.tip-2',  
               content: 'Welcome!!',  
               show: "fold",   
               close: function(event, ui)  
               {  
                  ui.tooltip.hover(function()  
                  {  
                     $(this).stop(true).fadeTo(400, 1);   
                  },  
                  function()  
                  {  
                     $(this).fadeOut('400', function()  
                     {  
                        $(this).remove();  
                     });  
                  });  
               }  
            });  
         });  
      </script>  
   </head>  
   <body style="padding:50px;">  
      <!-- HTML -->   
      <div id="target">  
         <a href="#" class="tip-1">Hello World!!</a><br/>  
         <a href="#" class="tip-2">Welcome!!</a>  
      </div>  
   </body>  
</html>

Output 1:

Output 2:

Output 3:

Explanation:

In the above example, we are displaying the usage and behavior of the open and close event. The open event is triggered when the tooltip is displayed or show while the close event is triggered when the tooltip is closed.

Please Share