Bootstrap Tooltip

Bootstrap Tooltip Plugin

The Tooltip Plugin

The Tooltip plugin allows you to display a small pop-up box with additional information when the user hovers over, focuses on, or clicks an element. It relies on Popper.js, which is included in Bootstrap’s bootstrap.bundle.min.js.

Hover over this button to see a tooltip!
Hover over this link to see a tooltip!

// Vanilla JavaScript initialization for all tooltips document.addEventListener(‘DOMContentLoaded’, function () { const tooltipTriggerList = document.querySelectorAll(‘[data-bs-toggle=“tooltip”]’); const tooltipList = […tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); });

	Tip: Tooltips require JavaScript initialization. Ensure you include bootstrap.bundle.min.js or bootstrap.min.js along with Popper.js separately, and then initialize them as shown.

How To Create a Tooltip

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element.

Use the title attribute (or data-bs-title for HTML content) to specify the text that should be displayed inside the tooltip:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <button type="button" class="btn btn-secondary"
            data-bs-toggle="tooltip" data-bs-placement="top"
            title="This is a tooltip on a button!">
      Hover over me (Button)
    </button>

    <a href="#" class="ms-3"
       data-bs-toggle="tooltip" data-bs-placement="bottom"
       title="Tooltip on a link!">
      Hover over me (Link)
    </a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Initialize all tooltips on the page
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
  </script>
</body>
</html>

Important: Tooltips must be initialized with JavaScript. The code snippet above shows how to select all elements with data-bs-toggle="tooltip" and initialize them.

The initialization script should be placed after the Bootstrap JS bundle.

Positioning Tooltips

By default, the tooltip will appear on top of the element. You can change this using the data-bs-placement attribute.

Accepted values for data-bs-placement are: top, bottom, left, right, and auto.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="container mt-3">
    <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
    <button type="button" class="btn btn-info ms-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
  </div>

  <!-- Ensure Bootstrap JS and tooltip initialization script are included -->
</body>
</html>
<!-- Don't forget to initialize these tooltips with JavaScript! -->
<script>
  const exampleTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"][data-bs-placement]'); // More specific selector if needed
  const exampleTooltipList = [...exampleTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>

	Tip: When data-bs-placement is set to auto, it will dynamically reorient the tooltip. For example, auto left will display the tooltip on the left when possible, otherwise on the right.

Complete Bootstrap Tooltip Reference

For a full list of options, methods, and events related to tooltips, please refer to the official Bootstrap 5 documentation on Tooltips.