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>

<head>

<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>

/* 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 include popper.min.js before bootstrap.js. Alternatively, you can use bootstrap.bundle.min.js or bootstrap.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, the util.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 the container 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, apply white-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>

<head>

<title>Bootstrap Tooltip Example</title>

</head>

<body>

</button>

// 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"]').tooltip();

});

This ensures that all elements with 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).

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 using tabindex="0".
Additionally, you can override the pointer-events on the disabled element to ensure it behaves as expected.

Example

<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 as data-animation="".

Bootstrap Tooltip