What Is a Bootstrap Tooltip?

A tooltip is a short message that appears when someone hovers over or focuses on an element. It provides extra information without filling the page with additional text.

Tooltips are commonly used for icon explanations, button descriptions, shortcuts, and brief hints. Bootstrap provides the styling, positioning, and interactive behavior.

Create Your First Tooltip

Start with an ordinary Bootstrap button. Add data-bs-toggle="tooltip" to identify the element as a tooltip trigger, and data-bs-title to supply its message.

<button type="button"
  class="btn btn-primary"
  data-bs-toggle="tooltip"
  data-bs-title="Click to save your changes">
  Save
</button>

Unlike Bootstrap dropdowns, tooltips are not activated automatically just by adding HTML attributes. They must be initialized with JavaScript.

Make Your Tooltips Work

First, include Bootstrap’s CSS and JavaScript bundle. Then initialize every element marked as a tooltip. The bundle includes Popper, which Bootstrap uses for tooltip positioning.

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
  const triggers =
    document.querySelectorAll('[data-bs-toggle="tooltip"]');

  triggers.forEach(element => {
    new bootstrap.Tooltip(element);
  });
</script>

Choose Where the Tooltip Appears

Bootstrap supports four tooltip placements: top, bottom, start, and end. Use data-bs-placement to select one.

<button type="button"
  class="btn btn-success"
  data-bs-toggle="tooltip"
  data-bs-placement="bottom"
  data-bs-title="This appears below the button">
  Bottom Tooltip
</button>

Bootstrap may adjust a tooltip’s placement when there isn’t enough space, helping prevent it from being cut off by the viewport.

Write Helpful Tooltip Text

A tooltip should explain an action or provide useful context. For example, a button labeled “Export” might display a message explaining the file format.

<button type="button"
  class="btn btn-outline-primary"
  data-bs-toggle="tooltip"
  data-bs-title="Download your report as a PDF">
  Export
</button>

Prefer clear, concise text. Avoid placing important instructions or essential information only inside tooltips, because not every user can easily discover or interact with them.

Support Keyboard and Touch Users

Bootstrap tooltips can appear when a user focuses on a button or link using the keyboard. This is why it’s important to use accessible, focusable elements as triggers.

<button type="button"
  class="btn btn-secondary"
  data-bs-toggle="tooltip"
  data-bs-trigger="hover focus"
  data-bs-title="Open your account settings">
  Settings
</button>

Control How Tooltips Behave

Bootstrap also supports options such as data-bs-trigger and data-bs-custom-class. These allow you to change when tooltips appear and customize their visual appearance.

<button type="button"
  class="btn btn-dark"
  data-bs-toggle="tooltip"
  data-bs-trigger="click"
  data-bs-title="Click again to hide this hint">
  Click for Hint
</button>

The click trigger can be useful when a tooltip needs to appear after a deliberate action. For ordinary explanatory hints, hover and focus behavior is generally more familiar.