When you need to describe a link, tooltips come in handy. jQuery was the inspiration for the plugin. Jason Frame created the tipsy plugin. Since then, tooltips have been improved to work without images, animate with CSS animations, and save local titles using data attributes.
When the user moves the mouse pointer over an element, the Tooltip plugin shows as a little pop-up box.
How to create a Tooltip?
The tooltip plugin generates content and markup on demand, and tooltips are placed after their trigger element by default. Tooltips can be added in one of two ways:
Using data attributes
Add data-toggle = "tooltip" to an anchor tag to add a tooltip. The text of a tooltip will be the title of the anchor. The plugin sets the tooltip to the top by default.
The tooltip plugin is not the same as dropdown or other CSS-only plugins covered in earlier chapters. To utilise this plugin, you must use jquery to activate it (read javascript). Simply use this script to activate all of the tooltips on your website:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip examples</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip on left">
Default Tooltip
</a>.
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on Left
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on Top
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on Bottom
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on Right
</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on left">
Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>
Output
Features
Certain features can be added using the Bootstrap Data API or called using JavaScript. The options are listed in the table below:
Feature Name
Type/Default Value
Data attribute name
Description
animation
boolean Default: true
data-animation
The tooltip is given a CSS fade transition.
html
boolean Default: false
data-html
This command adds HTML to the tooltip. If false, the text method of jQuery will be utilised to add content to the dom. If you're concerned about XSS assaults, use text.
placement
string|function Default: top
data-placement
The position of the tooltip (top|bottom|left|right|auto) is specified.
When auto is provided, the tooltip will reorient itself dynamically. If the placement is set to "auto left," the tooltip will appear to the left when possible and to the right otherwise.
selector
string Default: false
data-selector
Tooltip objects will be delegated to the given targets if a selector is provided.
title
string | function Default: "
data-title
If the title property isn't present, the title option is used as the default title value.
trigger
string Default: 'hover focus'
data-trigger
This property specifies how the tooltip is triggered: Hover | click | concentrate | manual You can pass numerous triggers; use a space to separate them.
content
string | function Default: ''
data-content
If the data-content attribute isn't set, the default content value is used.
delay
number | object Default: 0
data-delay
The time it takes for the tooltip to appear and disappear in milliseconds does not apply to the manual trigger type. The delay is applied to both conceal and display if a number is provided. The object's structure is as follows:
delay: { show: 500, hide: 100 }
container
string | false Default: false
data-container
The tooltip is appended to a specified element. 'body' is an example of a container.
These parameters can be set using data attributes or JavaScript. Simply append the option name to data-bs- along with the relevant value to define the tooltips options using data attributes, such as data-bs-animation="false," data-bs-placement="bottom," and so on.
Also, update the case type of the option name from camelCase to kebab-case when delivering the choices via data attributes. Instead of using data-bs-customClass="my-class," for example, use data-bs-custom-class="my-class."
JavaScript, on the other hand, is the preferred method of configuring these settings because it eliminates the need for repetitive labour.
Methods for Tooltip
Method
Description
Example
Options − .tooltip(options)
Attaches a tooltip handler to a group of elements.
$().tooltip(options)
Toggle − .tooltip('toggle')
Toggles the tooltip of an element.
$('#element').tooltip('toggle')
Show − .tooltip('show')
The tooltip of an element is revealed.
$('#element').tooltip('show')
Hide − .tooltip('hide')
The tooltip of an element is hidden.
$('#element').tooltip('hide')
Destroy − .tooltip('destroy')
The tooltip of an element is hidden and destroyed.
$('#element').tooltip('destroy')
Example of Methods
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
This is a <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip on method show
</a>.
This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip on
method hide
</a>.
This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip
on method destroy
</a>.
This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom"
title="toggle">Tooltip on method toggle
</a>.
<br><br><br><br><br><br>
<p class="tooltip-options">
This is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip on method options
</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show'); });
$(function () { $('.tooltip-hide').tooltip('hide'); });
$(function () { $('.tooltip-destroy').tooltip('destroy'); });
$(function () { $('.tooltip-toggle').tooltip('toggle'); });
$(function () {
$(".tooltip-options a").tooltip({ html: true });
});
</script>
</div>
</body>
</html>
Output
Events
The events that can be used with the tooltip plugin are shown in the table below. To hook into the function, utilise this event.
Event
Description
Example
show.bs.tooltip
When the display instance method is called, this event is triggered instantly.
$('#myTooltip').on('show.bs.tooltip', function () {
// write here
})
shown.bs.tooltip
When the tooltip is displayed to the user, this event is triggered (will wait for CSS transitions to complete).
$('#myTooltip').on('shown.bs.tooltip', function () {
// write here
})
hide.bs.tooltip
When the hide instance method is called, this event is instantly fired.
$('#myTooltip').on('hide.bs.tooltip', function () {
// write here
})
hidden.bs.tooltip
When the tooltip has been hidden from the user, this event is triggered (will wait for CSS transitions to complete).
$('#myTooltip').on('hidden.bs.tooltip', function () {
Tooltip is a plugin in the Bootstrap Framework that shows a little pop-up box when the mouse pointer hovers over an element. When a user hovers over a link, button, or another element, a little pop-up providing a tip or information about the element appears. When we want to display the purpose of each component on the homepage just by moving the mouse pointer over it, we utilise this Tooltip Plugin.
2. What is the positioning in Tooltip?
The bootstrap tooltip plugin is always shown on top of the element by default. However, we can utilise the data-placement feature to adjust the tooltip plugin's position, allowing us to set it on the top, bottom, left, or right side of the element.
<a href="#" data-toggle="tooltip"
data-placement="top"
title="Tooltip on top">
Tooltip on top
</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</a>
<a href="#" data-toggle="tooltip"
data-placement="left"
title="Tooltip on left">
Tooltip on left
</a>
<a href="#" data-toggle="tooltip"
data-placement="right"
title="Tooltip on right">
Tooltip on right
</a>
In this article, we have seen the uses of the tooltip plugin in bootstrap. A tooltip is a little pop-up that shows when the mouse pointer is held over an element, such as a link or a button, to provide information or hints about the element.
Tooltips can be quite useful for new visitors to your website since they allow the user to learn the function of icons and links just by hovering the mouse over them.
306+ registered