BBS5 Tooltip

Learn how to create tooltips.

BS5 Tooltip

The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.

Initialization

Tooltips must be initialized with JavaScript.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })

Positioning

Use the data-bs-placement attribute to set the position of the tooltip (top, bottom, left, right).

Examples

Basic Tooltips

html/css

A simple tooltip on hover.

<a href="#" data-bs-toggle="tooltip" title="Hooray!">Hover over me</a>

Positioning Tooltips

html/css

Tooltips in different directions.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>