jQuery UI Tooltip

The native tooltip is replaced by jQuery UI tooltip widget because the jQuery UI tooltip allows customization and adds new themes.

What is Tooltip?

Tooltips are used with the element to display a title in the title box next to the element, when you hover the element with your mouse. Tooltips can be attached to any element. If you want to display tooltip, just add title attribute to input elements and the title attribute value will be used as tooltip.

What does jQueryUI Tooltip do?

The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip. It gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.

Syntax:

You can use the tooltip() method in two forms.

First Method

The tooltip (options) method specifies that a tooltip can be added to an HTML element. The options parameter is an object that specifies the behavior and appearance of the tooltip.

Syntax:

You can use one or more options at a time using Javascript object. In the case of more than one options, you will separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option	Description
content	This option is used to represent the content of a tooltip. By default its value is function returning the title attribute.
disabled	If you set this option to true, it disables the tooltip. By default its value is false.
hide	This option is used to represent the animation effect when hiding the tooltip. By default its value is true.
items	This option specifies which items can show tooltips. By default its value is [title].
position	This option is used to indicate the position of the tooltip with respect to the associated target element. By default its value is function returning the title attribute. Its possible values are: my, at, of, collision, using, within.
show	This option represents how to animate the showing of tooltip. By default its value is true.
tooltipClass	This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.
track	If you set this option to true, the tooltip follows/tracks the mouse. By default its value is false.

jQuery UI Tooltip() example 1

Let's take a simple example to demonstrate the tooltip functionality passing no parameters to the tooltip() method.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for="comment">What is your comment:</label>
<input id="tooltip-1" title="We are asking your comment just for feedback">
<p><a id="tooltip-2" href="#" title="trainingtrains is the best tutorial website.">
I also have a tooltip
</a></p>
</body>
</html>

Test it Now

jQueryUI Tooltip() method example 2

Use of position:

Let's take an example to demonstrate the usage of option position in the tooltip function of jQuery UI.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
body {
margin-top: 100px;
}

.ui-tooltip-content::after, .ui-tooltip-content::before {
content: "";
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAA transparent;
border-width: 10px 10px 0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: white transparent;
border-width: 10px 10px 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-7" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for="name">Name:</label>
<input id="tooltip-7" title="Please use capital letters.">
</body>
</html>

Test it Now

jQuery UI Tooltip() method example 3

Use of content, track and disabled:

The following example demonstrates the usage of options content, track and disabled.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3" ).tooltip({
content: "<strong>Hello trainingtrains</strong>",
track:true
}),
$( "#tooltip-4" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for="name">Here is the message:</label>
<input id="tooltip-3" title="tooltip"><br><br><br>
<label for="name">Tooltip is disabled:</label>
<input id="tooltip-4" title="tooltip">
</body>
</html>

Test it Now

Second method

The tooltip (action, params) method is used to perform an action on the tooltip elements, such as disabling the tooltip. The action is specified as a string in the first argument and optionally, you can use one or more params according to the given action.

Syntax:

Following is a list of different actions used with this method.

Action	Description
close()	This action is used to close the tooltip. This method does not accept any arguments.
destroy()	This action is used to remove the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable()	This action is used to deactivate the tooltip. This method does not accept any arguments.
enable()	This action activates the tooltip. This method does not accept any arguments.
open()	This action programmatically opens the tooltip. This method does not accept any arguments.
option(optionName)	This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.
option()	This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.
option(optionName, Value)	This action sets the value of the tooltip option associated with the specified optionName.
option(Options)	This action sets one or more options for tooltip.
widget()	This action returns a jQuery object containing the original element. This method does not accept any arguments.

Event methods used with tooltip elements:

jQueryUI triggers event methods for a particular event. Following is a list of these event methods:

Event Method	Description
create(event,ui)	It is triggered when the tooltip is created. Here event is of type event, and ui is of type object.
close(event,ui)	It is triggered when the tooltip is closed. It is usually triggers on focusout or mouseleave. Here event is of type event, and ui is of type object.
open(event,ui)	It is triggered when the tooltip is displayed or shown. It is usually triggered on focusin or mouseover. Here event is of type event, and ui is of type object.

jQueryUI Tooltip() method example 4

Let's take an example to demonstrate event method usage during tooltip functionality. The following example uses the open and close events.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Are you looking for a training program?',
               show: "slideDown", // show immediately
               open: function(event, ui)
               {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to trainingtrains',
               show: "fold", 
               close: function(event, ui)
               {
                  ui.tooltip.hover(function()
                  {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function()
                  {
                     $(this).fadeOut('500', function()
                     {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   <body style="padding:100px;">
      <!-- HTML --> 
      <div id="target">
         <a href="#" class="tooltip-9">Hover over me!</a><br/>
         <a href="#" class="tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

Test it Now

Next TopicjQuery UI Hide

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI Tooltip

First Method

jQuery UI Tooltip() example 1

jQueryUI Tooltip() method example 2

jQuery UI Tooltip() method example 3

Second method

jQueryUI Tooltip() method example 4