Updated April 3, 2023
Introduction to jQuery Tooltip
Tooltip is a piece of information or message that appears when we hover the cursor over an element. Tooltip can be attached with any element. It can be a label, textbox, etc. To use a tooltip we need to set value for the title attribute. A jQuery tooltip replaces the native tooltip. It allows us to have customized tooltip. It not only can be applied on an element or so but on the whole page at once.
Syntax:
$(selector).tooltip();Explanation:
For using the jQuery tooltip we need to use the tooltip() method. Based on the selector of a particular element, the corresponding tooltip gets attached and the same is displayed.
Functions of jQuery Tooltip
- The tooltip() method allows us the implementation of jQuery tooltip. It replaces the native tooltip which is set using the title attribute.
- There is also an option called content which can be used to specify the content.
- If we specify both, that is the title attribute and content option, the value of the title attribute gets overridden by the value of the content option.
- The content option supports multiple types as a string and a function.
- Usually, the tooltip is displayed below the element, inspite of hovering the mouse anywhere on the element.
- If we want the tooltip to follow the mouse, it can be implemented by setting the property track to true.
Examples
Given below are the examples:
Example #1
Example of a tooltip by setting a value against the title attribute.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<form id="f1" action="">
<label id="l1" for="t1" title="Full name">Name:</label>
<input id="t1" type="text" title="Enter your full name as it appears in your identification card" />
</form>
</body>
</html>Output:
When we hover the mouse over the name label and the textbox, the below image shows how the tooltip appears.
Example #2
Example of jQuery tooltip()method.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$("#t1").tooltip();
});
</script>
</head>
<body>
<form id="f1" action="">
<label id="l1" for="t1" title="Full name">Name:</label>
<input id="t1" type="text" title="Enter your full name as it appears in your identification card"/>
</form>
</body>
</html>Output:
As seen we have applied jQuery tooltip only for the textbox and not the label name.
Example #3
Demonstration of the content option of the tooltip method.
There are two types:
a. String type in content option
We will be using the content option by passing the value directly in string.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$("#t1").tooltip({
content : "Content overriding the title value"
});
});
</script>
</head>
<body>
<form id="f1" action="">
<label id="l1" for="t1" title="Full name">Name:</label>
<input id="t1" type="text" title="Enter your full name as it appears in your identification card" />
</form>
</body>
</html>Output:
As explained in the working, the content option overrides the title value.
b. Function in content option
We will be using the content option by passing through the function.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$("#t1").tooltip({
content :getDataFromToolTip
});
function getDataFromToolTip(){
return "This tooltip is returned from a function"
}
});
</script>
</head>
<body>
<form id="f1" action="">
<label id="l1" for="t1" title="Full name">Name:</label>
<input id="t1" type="text" title="Enter your full name as it appears in your identification card" />
</form>
</body>
</html>Output:
As per the above code, the displayed tooltip is passed to the content using a function.
Example #4
Example of making the tooltip follow the hovering of a mouse using the track property.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></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>
<script>
$(document).ready(function(){
$("#t1").tooltip({
content :getDataFromToolTip, track:true
});
function getDataFromToolTip(){
return "This tooltip is returned from a function"
}
});
</script>
</head>
<body>
<form id="f1" action="">
<label id="l1" for="t1" title="Full name">Name:</label>
<input id="t1" type="text" title="Enter your full name as it appears in your identification card" />
</form>
<script>
</body>
</html>Output:
By setting the track property to true, now the tooltip follows the mouse hovering.
Conclusion
Thus we studied how the jQuery tooltip() method allows us to have customized tooltip. We also went through an example of tooltip by using the title attribute. We demonstrated the content option available in jQuery tooltip() method with its types that are string and function and also looked over an example of making the tooltip follow the hovering of a mouse using the track property.
Recommended Articles
This is a guide to jQuery Tooltip. Here we discuss the Introduction, functions of jQuery tooltip along with examples. You may also have a look at the following articles to learn more –
