Bootstrap - Tooltips

Tooltips in Bootstrap 5 are small, informative text boxes that appear when a user hovers over an element. They are used to provide additional information without cluttering the UI. Bootstrap tooltips are highly customizable, and you can control their display, position, and trigger behaviour.

In this guide, we’ll cover:

Setting Up Bootstrap Tooltips

Basic Tooltip Implementation

Customizing Tooltips

Trigger Options

Tooltip Placement

Tooltip Events and Programmatic Control

Setting Up Bootstrap Tooltips

Bootstrap tooltips require Bootstrap’s JavaScript and Popper.js (included with Bootstrap 5). Be sure to include the following in your HTML:

Basic Tooltip Implementation

To create a tooltip, add data-bs-toggle="tooltip" to the target element and set the tooltip text using the title attribute.

Hover over me

</button>

Initializing Tooltips

To enable tooltips, use the following JavaScript code:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

This code initializes all elements with the data-bs-toggle="tooltip" attribute.

Customizing Tooltips

Bootstrap tooltips are customizable, with options for styling, triggers, and more.

Setting Custom Tooltip Content

To set specific content for the tooltip, you can directly set the title attribute or set it programmatically.

Info Button

</button>

Adding HTML Content

If you want HTML in your tooltip, set data-bs-html="true". This lets you use HTML tags like <b>, <i>, and others within the tooltip.

<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-html="true" title="<b>Bold Text</b> and <i>italic text</i>">

HTML Tooltip

</button>

Trigger Options

Tooltips can be displayed based on various triggers:

hover: Shows the tooltip on hover (default).

focus: Displays the tooltip when the element is focused.

click: Displays the tooltip on click.

manual: Manually controls the tooltip display.

To set a custom trigger, use data-bs-trigger:

Click Tooltip

</button>

You can also use multiple triggers by separating them with spaces:

Hover or Focus Tooltip

</button>

Tooltip Placement

Control tooltip placement with the data-bs-placement attribute. Options include top, bottom, left, and right.

Right Tooltip

</button>

Programmatic Control of Tooltips

Tooltips can also be managed programmatically, allowing you to show, hide, or toggle them in response to user actions.

Showing and Hiding Tooltips

You can access a tooltip instance and use its methods like show(), hide(), and toggle().

// Select the tooltip element

const tooltipElement = document.querySelector('#tooltipButton');

const tooltip = new bootstrap.Tooltip(tooltipElement);

// Show the tooltip

tooltip.show();

// Hide the tooltip

tooltip.hide();

// Toggle the tooltip

tooltip.toggle();

Example: Manual Control

When using manual trigger, you can manually control the tooltip display programmatically.

Manual Tooltip

</button>

const manualTooltip = new bootstrap.Tooltip(document.querySelector('#manualTooltipButton'));

document.querySelector('#manualTooltipButton').addEventListener('click', () => {

manualTooltip.toggle();

});

</script>

Tooltip Events

Bootstrap tooltips support various events, allowing you to run custom code when a tooltip is shown, hidden, etc.

show.bs.tooltip: Fired when the show instance method is called.

shown.bs.tooltip: Fired when the tooltip has been made visible.

hide.bs.tooltip: Fired when the hide instance method is called.

hidden.bs.tooltip: Fired when the tooltip has been fully hidden.

const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]');

tooltipElement.addEventListener('shown.bs.tooltip', () => {

console.log('Tooltip is now visible');

});

Full Example

Below is a complete example showcasing different types of tooltips, their triggers, and custom placements.

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Tooltip Example</title>

</head>

Basic Tooltip

</button>

<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-html="true" title="<b>Bold</b> and <i>italic</i> tooltip">

HTML Tooltip

</button>

Click Tooltip

</button>

Right Placement Tooltip

</button>

Manual Tooltip

</button>

// Initialize all tooltips

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

// Manual tooltip toggle

const manualTooltip = new bootstrap.Tooltip(document.querySelector('#manualTooltipButton'));

document.querySelector('#manualTooltipButton').addEventListener('click', () => {

manualTooltip.toggle();

});

</script>

</body>

</html>