Bootstrap Tooltip Plugin

The Bootstrap Tooltip Plugin helps add small pop-up messages when hovering over an element.

It improves user experience by providing additional information.

Important Note: Tooltips require the Popper.js library to function properly. Make sure it’s included.

2. How To Create a Tooltip

To create a tooltip, use the data-bs-toggle="tooltip" attribute:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip example">Hover me</button>

3. Positioning Tooltips

You can position tooltips using the data-bs-placement attribute:

top (default)
bottom
left
right

The tooltip will show up on top of the element by default.

Example:

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Right tooltip">Hover me</button>

4. Initialize Tooltips Using JavaScript

Important Note: Initialize tooltips using JavaScript:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

Request more information

Bootstrap Tooltip Plugin