Bootstrap Tooltip
What is Bootstrap Tooltip
Bootstrap tooltips are a user interface component used to display additional information when a user hovers over, focuses on, or clicks an element.
Tooltips are typically small popups that appear near the element to provide contextual information, such as descriptions, labels, or instructions.
Custom Bootstrap Tooltips with CSS and JavaScript
This guide explains how to create custom Bootstrap tooltips using CSS for animations and JavaScript for handling behavior.
We’ll use CSS3 for smooth animations and data attributes to store the tooltip content locally.
HTML Structure
Start by setting up the HTML with elements that will trigger the tooltips. Use the data-title
attribute to store the tooltip text.
<button class="tooltip-button" data-title="This is a custom tooltip">Hover me</button>
CSS for Tooltip Styles and Animations
Use CSS to define the appearance and animations of the tooltips. This example includes basic styling, positioning, and animations using CSS3.
.tooltip-button {
position: relative;
cursor: pointer;
}
.tooltip-button::before,
.tooltip-button::after {
content: attr(data-title);
position: absolute;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.tooltip-button::before {
bottom: 150%;
left: 50%;
transform: translate X(-50%) translate Y(10px);
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
font-size: 14px;
}
.tooltip-button::after {
content: '';
bottom: 135%;
left: 50%;
transform: translate X(-50%);
border-width: 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-button: hover::before,
.tooltip-button :hover::after {
opacity: 1;
transform: translate X(-50%) translate Y(0);
}
JavaScript for Tooltip Behavior
If you want to customize tooltip behavior further (e.g., showing/hiding on different events), use JavaScript to enhance the interaction.
document. query Selector All('.tooltip-button').for Each(button => {
button. add Event Listener('mouse enter', function() {
// Custom actions when the tooltip shows
});
button. add Event Listener('mouse leave', function() {
// Custom actions when the tooltip hides
});
});
Putting It All Together
When you hover over the button, the tooltip will appear smoothly above it, using the content from the data-title
attribute.
The combination of CSS3 transitions and data attributes allows for easy styling and flexible content management.
Example in Action
<!DOCTYPE html>
<html language="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Tooltip Example</title>
<style>
/* Include the CSS code from above here */
</style>
</head>
<body>
<button class="tooltip-button" data-title="This is a custom tooltip">Hover me</button>
<script>
/* Include the JavaScript code from above here */
</script>
</body>
</html>
overview
When working with Bootstrap’s tooltip plugin, here are some essential things to keep in mind
Dependency on Popper.js:
Tooltips rely on the third-party library Popper.js for positioning. You must includepopper.min.js
beforebootstrap.js
. Alternatively, you can usebootstrap.bundle.min.js
orbootstrap.bundle.js
, which already include Popper.js, ensuring tooltips work as expected.Required
util.js
for Source Builds:
If you are building Bootstrap's JavaScript from source, theutil.js
file is required for tooltips to function correctly.Tooltips Are Opt-In:
For performance reasons, tooltips are not automatically enabled. You need to initialize them manually for any element you want to use tooltips with.Empty Tooltips Are Never Displayed:
Tooltips will not show if their title content is empty or has zero length.Use
container: 'body'
for Complex Components:
To avoid rendering issues with more complex elements like input groups or button groups, set thecontainer
option to'body'
. This ensures the tooltip is properly positioned.Hidden Elements Won’t Trigger Tooltips:
Tooltips cannot be triggered on elements that are hidden from view.Handling Disabled Elements:
Since tooltips cannot be triggered directly on.disabled
or disabled elements, wrap them in a container (like a<div>
) and trigger the tooltip on that wrapper instead.Tooltips on Multiline Links:
If a hyperlink spans multiple lines, the tooltip will be centered by default. To prevent this behavior, applywhite-space: nowrap;
to your anchor tags.Clean-Up Before Removing Elements:
Ensure tooltips are hidden before removing the corresponding elements from the DOM to avoid any issues.
How Bootstrap Tooltips Work:
Tooltips are enabled using Bootstrap's JavaScript and require both the Bootstrap CSS and JavaScript libraries.
Example:
<!DOCTYPE html>
<html language="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Tooltip Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="button button-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
</button>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Initialize tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
How the Code Works:
- The
data-toggle="tooltip"
attribute enables the tooltip functionality. - The
data-placement="top"
attribute sets the tooltip position (e.g., top, bottom, left, right). - The
title
attribute contains the tooltip text.
Initialization:
In the JavaScript, tooltips are initialized using
$(function () {
data-toggle="tooltip"
will have the tooltip functionality enabled when the page loads.When to Use Bootstrap Tooltips:
- To provide brief contextual information without cluttering the UI.
- To display non-essential but useful information, such as hints or explanations.
Markup
Tooltip Markup
- To add a tooltip, the only markup needed is a
data
attribute and a title
attribute on the HTML element where you want the tooltip to appear. - The tooltip’s generated markup is straightforward but does require specifying its position, which defaults to the top (though this can be customized).
data
attribute and a title
attribute on the HTML element where you want the tooltip to appear. Disabled Elements and Tooltips
- Elements with the
disabled
attribute are non-interactive, meaning users cannot focus, hover, or click on them to trigger a tooltip (or popover). - To work around this limitation, wrap the disabled element in a
<div>
or<span>
, and trigger the tooltip from the wrapper instead. For better accessibility, make the wrapper keyboard-focusable usingtabindex="0"
. - Additionally, you can override the
pointer-events
on the disabled element to ensure it behaves as expected.
Example
<div class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="button button-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</div>
Option
Tooltip Options
- You can pass options to tooltips either through data attributes or via JavaScript.
- For data attributes, prepend the option name with
data-
, such asdata-animation="".