Bootstrap Tooltips and Popovers

A tooltip is a small label which shows when the user moves the mouse over an element or focuses it. A popover is a bigger box with a title and some content. Both use Popper to find the right place.

Important: tooltips and popovers are opt-in. For performance reasons they do not start by themselves. You must start them with JavaScript.

Tooltips

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Hover me</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Bottom</button>
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) { new bootstrap.Tooltip(el); });
</script>

Put this script after the Bootstrap JavaScript file, otherwise bootstrap is not defined yet. In Bootstrap 5.3 the text is in data-bs-title (you can also use the normal title attribute). The placement can be top, bottom, left or right.

const first = document.querySelector('[data-bs-toggle="tooltip"]');
const tip = bootstrap.Tooltip.getInstance(first);
console.log('tooltip instance created: ' + (tip !== null));
first.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
await new Promise(r => setTimeout(r, 400));
const box = document.querySelector('.tooltip');
console.log('tooltip box in the page: ' + (box !== null) + (box ? ', text: "' + box.textContent.trim() + '"' : ''));

Popovers

<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here is some content for the popover.">Click to toggle the popover</button>
<script>
  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) { new bootstrap.Popover(el); });
</script>

const btn = document.querySelector('[data-bs-toggle="popover"]');
btn.click();
await new Promise(r => setTimeout(r, 400));
const pop = document.querySelector('.popover');
console.log('popover in the page: ' + (pop !== null));
console.log('title: ' + pop.querySelector('.popover-header').textContent);
console.log('content: ' + pop.querySelector('.popover-body').textContent);

Options

Option (data attribute)	Meaning
data-bs-placement	top, bottom, left, right (or auto)
data-bs-trigger	hover, focus, click (popover default is click, tooltip default is hover and focus)
data-bs-html="true"	Allow HTML in the content (be careful with user data)
data-bs-content	The body text of a popover
data-bs-custom-class	Add your own class

Rules

• Tooltips on a disabled button do not work. Wrap the button in a span and put the tooltip on the span.
• Use them for short extra information only. Do not hide important text in a tooltip, because phones have no hover.
• The elements must be visible when you start the plugin. A tooltip on a hidden element can be placed wrong.
• The default focus and hover also work with the keyboard, so keep the elements focusable (buttons and links).

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.