”;
This chapter will discuss about adding custom Bootstrap tooltips. Tooltip is typically displayed as a small, floating box that appears when the user hovers over or clicks on a specific UI element, such as a button, icon, or hyperlink.
Tooltips are used to provide context, explanations, or instructions for users who may need more information about the purpose or functionality of a UI element.
Things to remember while using the tooltip plug-in:
As tooltips depend on Popper, a third party library, for positioning, you must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper for tooltips to work.
You must initialize the tooltips first, as tooltips are opt-in for performance reasons.
A tooltip will never be shown for a zero-length title value.
Triggering tooltips will not work on hidden elements.
Tooltips for .disabled or disabled elements must be triggered using a wrapper element.
To avoid getting tooltips centered, use white-space: nowrap; on the <a> element.
Before removing any element from the DOM, you must hide the tooltips corresponding to them.
Inside a shadow DOM, tooltips can be triggered thanks to an element.
Enable Tooltips
Initialize all the tooltips on a page, by their data-bs-toggle attribute
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
Creating a Tooltip
Add the data-bs-toggle=”tooltip” attribute to an element, to create a tooltip.
-
The data-bs-toggle attribute defines the tooltip.
- The title attribute defines the text to be displayed inside the tooltip.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltips</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Bootstrap tooltip creation</h4>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Tooltips on Links
Tooltips can be added to links as well using the attribute data-bs-toggle. Let”s see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltip</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Tooltip on link</h4>
<p class="muted">The <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Feel free to use either title or data-bs-title in your HTML. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.
Custom tooltips
Bootstrap provides a custom class data-bs-custom-class=”custom tooltip” to customize the tooltip. Let”s see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltip</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Custom Tooltip</h4>
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip" data-bs-placement="right"
data-bs-custom-class="custom-tooltip"
data-bs-title="Tooltip is created as custom tooltip.">
Custom tooltip
</button>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Positioning of a Tooltip
There are four options available for the positioning of the tooltip: left, right, top and bottom aligned.
By default, the tooltip will appear on top of the element.
The data-bs-placement attribute is used to set the position of the tooltip.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Tooltip</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example tooltip-demo">
<h4>Tooltip example - Position</h4>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Top Tooltip">
Top Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Right Tooltip">
Right Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip">
Bottom Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Left Tooltip">
Left Tooltip
</button>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Tooltip with custom HTML
The example given below shows a tooltip with custom HTML added.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltips</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Bootstrap tooltip creation with HTML</h4>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Markup
For a tooltip on any HTML element, the required markup for the tooltip is only a data attribute and title.
The markup of a tooltip that is generated is simple and is set to top, be default.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltips</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Bootstrap tooltip markup</h4>
<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Markup for a tooltip
</div>
</div>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Tooltip on disabled elements
The users can not focus, hover or click on the elements with disabled attribute, to trigger a tooltip. Thus, in order to trigger a tooltip, use the wrapper <div> or <span>.
Use tabindex=”0″ to make it keyboard-focusable.
Example
Here is an example of tooltip on disabled element:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltips</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Tooltip on Disabled Element</h4>
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled">
<button class="btn btn-secondary" type="button" disabled>Button Disabled</button>
</span>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
Options
-
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary=”{value}”.
-
When passing the options via data attributes, make sure to change the case type to “kebab-case” from “camelCase”, such as use data-bs-fallback-placements=”[array]” instead of data-bs-fallbackPlacements=”[array]”.
Example
Here is an example of options added as an attribute to .data-bs- class:
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltips - Options</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h4>Tooltip options</h4>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
<script>
const tooltipTriggerList = document.querySelectorAll(''[data-bs-toggle="tooltip"]'')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
</body>
</html>
The table given below shows the various options provided by Bootstrap, to be appended to the class .data-bs- as a data attribute.
| Name | Type | Default | Description |
|---|---|---|---|
| allowList | object | default value | Object that contains allowed attributes and tags. |
| animation | boolean | true | A CSS fade transition is applied to the tooltip. |
| boundary | string, element | ”clippingParents” | By default, it’s ”clippingParents” and can accept an HTML Element reference (via JavaScript only). |
| container | string, element, false | false | Appends the tooltip to a specific element. |
| customClass | string, function | ”” | These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: ”class-1 class-2”. |
| delay | number, object | 0 | Delay showing and hiding the tooltip (ms). Object structure is: delay: { “show”: 500, “hide”: 100 }. |
| fallbackPlacements | array | [”top”, ”right”, ”bottom”, ”left”] | Define fallback placements by providing a list of placements in array. |
| html | boolean | false | Allow HTML in the tooltip. |
| offset | array, string, function | [0, 0] | Offset of the tooltip relative to its target. Ex: data-bs-offset=”10,20″. |
| placement | string, function | ”top” | Decides the position of the tooltip. |
| popperConfig | null, object, function | null | To change Bootstrap’s default Popper config. |
| sanitize | boolean | true | Enable or disable the sanitization. |
| sanitizeFn | null, function | null | You can supply your own sanitize function. |
| selector | string, false | false | With a selector, tooltip objects will be delegated to the specified targets. |
| template | string | ”
” |
While creating a tooltip, use the base HTML. |
| title | string, element, function | ”” | It refers to the title of the tooltip. |
| trigger | string | ”hover-focus” | Shows how the tooltip is triggered: click, hover, focus, manual. |
”;