In this post, we will look into the details of jQueryUI Tooltip plugin. We can attach tooltip to any element and when the mouse pointer is over that element, the title attribute is shown in a small box next to it. This is often used with form elements to provide additional information for the users.
The Tooltip plugin is used to replace the native tooltips. We can customize the tooltip with different options, methods and events to improve the user experience.
Contents
Tooltip Plugin Options
In this section, we will discuss about different options available to customize the jQueryUI Tooltip plugin. We have used many of these options in the Tooltip Plugin in Action section.
The above table briefly describes all the available options in the jQueryUI Tooltip plugin.
Tooltip Plugin Methods
In this section, we will look into the jQueryUI Tooltip plugin methods and its syntax. These methods are very useful when you deal with the Tooltip plugin.
The above table briefly describes all the available methods in the jQueryUI Tooltip plugin.
Tooltip Plugin Events
In this section, we will discuss about different events associated with jQueryUI Tooltip plugin. We have used many of these events in the Tooltip Plugin in Action section.
The above table briefly describes all the available events in the jQueryUI Tooltip plugin.
Tooltip Plugin in Action
In this section, we will try different examples to explore the uses of jQueryUI Tooltip plugin.
Default Functionality
The following example demonstrates the default functionality of jQueryUI Tooltip plugin.
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip– Default Functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="name">Name:</label>
<input id="name" title="Enter your name">
<p><a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>
</body>
</html>
You will see the tooltip when you hover the input field and the link shown below.
Tooltip with Animation
The following example demonstrates how we could animate the tooltip plugin. We use hide and show options to animate the tooltip. You can also find the use of the option position and the open event in this example.
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip - Animation</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#name" ).tooltip({
show: {
effect: "slideDown",
delay: 200
}
});
$( "#link-tooltip" ).tooltip({
hide: {
effect: "explode",
delay: 200
}
});
$( "#city" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
</script>
</head>
<body>
<p><label for="name">Name :</label>
<input id="name" title="Enter your name">
<p><label for="city">City :</label>
<input id="city" title="Enter your City">
<p><a id="link-tooltip" href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>
</body>
</html>
You can now play with output.
Tooltip using track option
The following example demonstrates the use of track option. You will see the Tooltip following the mouse when you move over the fields.
<!doctype html>
<html>
<head>
<title>jQuery UI Tooltip – Track Mouse</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip({
track: true
});
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><label for="name">Name:</label>
<input id="name" title="Enter your name">
<p><a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>
</body>
</html>
You will see the Tooltip following the mouse when you move over the fields.
That’s all for now and you will see more in the coming posts.