Tooltips and Popovers

Tooltips and Popovers

Tooltips and popovers show extra information. Both require Popper, which is included in the bundle script.

Tooltip

A tooltip is a small text bubble that appears when you hover over an element. Add data-bs-toggle="tooltip" and title:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">
  Hover over me
</button>

Tooltip placement

Control the position with data-bs-placement:

• data-bs-placement="top"
• data-bs-placement="bottom"
• data-bs-placement="left"
• data-bs-placement="right"

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="I am on the right">
  Tooltip on right
</button>

Initializing tooltips

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);
});

Popover

A popover is like a tooltip but bigger, with a title and content. It needs two more attributes:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="Some content inside the popover">
  Click to toggle popover
</button>

Initializing popovers

Popovers also need JavaScript initialization:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl);
});

Tooltip vs popover

• Tooltips show a short label on hover.
• Popovers show a title plus content on click.
• Both need Popper and JS initialization.

TL;DR

• Tooltips use data-bs-toggle="tooltip" + title.
• Popovers use data-bs-toggle="popover" + data-bs-content.
• Both need the bundle (Popper) and JS initialization.
• data-bs-placement controls position.