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 a 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, by 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 a 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 concerning the associated target element. The default value is a function returning the title attribute. The possible values of this option are: my, at, of, collision, using, and within. |
| show | To specify the way to animate the showing of the 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 | Follow/track the mouse to allow the tooltip 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>
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 have 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>
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>
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 parameters 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 so that the element returns 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 open 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 the 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>
Explanation:
In the above example, we are displaying the usage and behavior of the open and closed events. The open event is triggered when the tooltip is displayed or shown while the close event is triggered when the tooltip is closed.