The tooltip widget in jQuery UI is different from the traditional tooltip primarily by making it more themeable and making it much more customizable. Some of the customizations available are:
- Extra content like footnotes etc can also be displayed by retrieving it through Ajax.
- Customizing the fields for Warning and error fields.
- Customize the position, i.e. to center the tooltip above elements.
By default, a fading animation is used to display the tooltip.
Syntax:
$( "#div_tooltip" ).tooltip({
});Attribute Values:
- content: This attribute represents the content of a tooltip. By default, its value is a function returning the title attribute.
- disabled: This attribute when set to true disables the tooltip. By default its value is false.
- hide: This attribute represents the animation effect when hiding the tooltip. By default its value is true.
- items: This option indicates which items can show tooltips. By default its value is [title].
- position: This attribute decides the position of the tooltip with respect to the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within.
- show: This attribute represents how to animate the showing of tooltip. By default its value is true.
- tooltipClass: This attribute 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: This attribute when set to true, the tooltip follows/tracks the mouse. By default its value is false.
The tooltip is addable which will override the parent string written with the title attribute. This gives us an advantage as we can change the tooltip by using a script, it is like the same element can show different strings of tooltips under different requirements. Let’s try that. Here we have defined the title as “Welcome to geeksforgeeks” which is overwritten inside the javascript code.
Example 1:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<div id=div_tooltip title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({});
})
</script>
</center>
</body>
</html>
|
Output:
Overwriting the title in Tooltip: Another major advantage of the Tooltip widget in jQuery UI is that the title can be overwritten as specified while defining the element. This can be done by specifying the message inside the content option inside our JavaScript code.
Example 2:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({
content: "This is my content"
});
})
</script>
</center>
</body>
</html>
|
Output:
Disabling Tooltip: This attribute when set to true disables the tooltip. By default its value is false.
Example 3:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip
title='Welcome to geeksforgeeks'>
Bring your Mouse here
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#div_tooltip").tooltip({
disabled: true
});
})
</script>
</center>
</body>
</html>
|
Output:
Items: The items attribute is used to set a different element message to be displayed as a tooltip. In the below example, one textbox is kept inside the div tag. By default, the message written inside the textbox is to be displayed as a tooltip, but by setting the items to the div tag, and display the message written inside the title attribute of div tag as tooltip.
Example 4:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div id=div_tooltip title='I am inside a Div tag'>
<input type=textbox name=my_text id=my_text title='I am the input box'>
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
items: 'div'
});
})
</script>
</center>
</body>
</html>
|
Output:
Position: This attribute is used to display the tooltip at any position relative to the main element.
Possible values are.
- my: This is the tooltip box.
- at: The element for which the tooltip is displayed.
Also note that:
- All horizontal alignment can take three positions: left or right or center.
- All vertical alignment can take three positions: top or bottom or center.
Check this line
position: { my: "left center", at: "right top" } Here the tooltip’s left side center position (my: “left center”) will be aligned to main elements right side top position (at: “right top”)
Example 5:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div align=center>
<input type=textbox
name=my_text
id=my_text
title=''>
</div>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
content: "I am the textbox",
position: {
my: "left center",
at: "right top"
}
});
})
</script>
</center>
</body>
</html>
|
Output:
Show-Hide Tooltip: Show & hide are two independent options but we can learn them together. The show attribute is used to add effects to manage the appearance of the tooltip. This is the animation that is created while showing the tooltip. The hide attribute is used to add effects to manage the disappearance of the tooltip. This is the animation that is created while hiding the tooltip.
For both show and hide options, use several effects in the below example.
Example 6:
<html>
<head>
<link href=
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">Geeksforgeeks</h1>
<input type=textbox name=my_text id=my_text title='I am the input box'>
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function() {
$("#my_text").tooltip({
show: {
effect: "slide",
duration: 400
},
hide: {
effect: "pulsate",
duration: 400
}
});
})
</script>
</center>
</body>
</html>
|
Output: