Tooltips & Popovers

Learn how to add Bootstrap tooltips and popovers, initialize them with JavaScript, and configure placement and triggers.

Introduction

Tooltips and popovers surface small pieces of extra information without cluttering the interface. A tooltip is a short text label that appears on hover or focus; a popover is a larger box that can hold a title and richer body content, typically triggered by a click. Unlike most Bootstrap components, both require you to manually initialize them with a line of JavaScript because enabling every tooltip on a page automatically would hurt performance.

What You Will Learn

How to enable and initialize tooltips with JavaScript.
Controlling tooltip placement with data-bs-placement.
Building popovers with titles and body content.
Configuring triggers: hover, focus, click, and manual.
Allowing safe HTML content inside a popover.

Enabling Tooltips

Add data-bs-toggle="tooltip" and a title attribute holding the tooltip text to any element. Because tooltips are opt-in for performance reasons, you must initialize them yourself by selecting every element with the toggle attribute and creating a new bootstrap.Tooltip instance for each one.

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top" title="Saves your changes">
  Save
</button>

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(
  el => new bootstrap.Tooltip(el)
);

Result

Click Run to see what this code prints.

The data-bs-placement attribute controls which side the tooltip appears on: top, right, bottom, or left. Bootstrap automatically flips the placement if there is not enough viewport space.

<button data-bs-toggle="tooltip" data-bs-placement="right" title="Right tooltip">Right</button>
<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom tooltip">Bottom</button>
<button data-bs-toggle="tooltip" data-bs-placement="left" title="Left tooltip">Left</button>

Basic Popovers

Popovers work the same way but use data-bs-toggle="popover" along with a title attribute (the popover heading) and a data-bs-content attribute (the body text). They must also be initialized in JavaScript.

<button type="button" class="btn btn-primary"
        data-bs-toggle="popover" title="Dismissible popover"
        data-bs-content="This popover explains the button's purpose.">
  Click for details
</button>

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(
  el => new bootstrap.Popover(el)
);

Popover Placement & Triggers

Like tooltips, popovers accept data-bs-placement. The data-bs-trigger attribute decides what opens them: "click" (default), "hover", "focus", or "manual" for triggering programmatically. You can combine triggers by separating them with a space, such as "hover focus".

data-bs-trigger value	Behavior
click	Opens/closes when the trigger element is clicked (default)
hover	Opens on mouse hover, closes on mouse leave
focus	Opens on keyboard focus, closes on blur — good for accessibility
manual	Opened and closed only via JavaScript methods

<button class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="hover focus"
        data-bs-placement="top" title="Heads up" data-bs-content="Shown on hover or keyboard focus.">
  Hover or Tab to me
</button>

Dismissible Popovers

Combine data-bs-trigger="focus" with an anchor styled as a button to create a popover that closes automatically when the user clicks elsewhere, since clicking away removes focus from the trigger.

<a tabindex="0" class="btn btn-outline-secondary" role="button"
   data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible"
   data-bs-content="Click anywhere outside this popover to close it.">
  Dismissible popover
</a>

HTML Content

Set data-bs-html="true" to allow markup inside the title or content instead of treating it as plain text. Because this renders raw HTML, only use it with content you trust — never with unsanitized user input, as it opens the door to XSS.

<button data-bs-toggle="popover" data-bs-html="true"
        title="<strong>Formatted title</strong>"
        data-bs-content="<em>Body text</em> with <b>bold</b> formatting.">
  HTML popover
</button>

Security Note

Never set data-bs-html="true" on content built from unsanitized user input — Bootstrap will render it as-is, which is a direct cross-site scripting (XSS) risk.

Common Mistakes

Avoid These Mistakes

Forgetting to run the JavaScript initialization loop — the data attributes alone do nothing without it.
Using the title attribute for both the native browser tooltip and a Bootstrap tooltip, causing a double tooltip.
Not testing tooltip/popover placement near viewport edges, where Bootstrap auto-flips positioning.
Passing raw, untrusted HTML with data-bs-html="true".
Overusing popovers for content that should just be visible on the page — they hurt discoverability on touch devices.

Best Practices

Initialize all tooltips/popovers once, near the end of your page or in a single app-init script.
Prefer "hover focus" triggers over "hover" alone so keyboard users can access the same information.
Keep tooltip text short — a few words — and reserve popovers for longer explanations.
Set a sensible data-bs-placement based on where the trigger sits on the page (e.g. "bottom" for elements near the top).
Dispose of tooltips/popovers on dynamically removed elements to avoid memory leaks in single-page apps.

Frequently Asked Questions

Why doesn't my tooltip show up at all?

The most common cause is skipping the JavaScript initialization step — data-bs-toggle="tooltip" alone does not activate anything; you must instantiate new bootstrap.Tooltip(el) for each trigger element.

Can I close a popover programmatically?

Yes. Call the .hide() method on the popover instance, e.g. popoverInstance.hide(), or use bootstrap.Popover.getInstance(el).hide().

Do tooltips work on disabled buttons?

Not directly, since disabled elements don't fire mouse events. Wrap the disabled button in a <span> with tabindex="0" and put the tooltip attributes on the wrapper instead.

Key Takeaways

Tooltips and popovers must be manually initialized in JavaScript for performance reasons.
data-bs-placement controls position; data-bs-trigger controls what opens/closes them.
Popovers support a title and a data-bs-content body; tooltips only support the title.
Enable HTML content only for trusted content — never for unsanitized user input.

Summary

Tooltips and popovers are small, opt-in components that add contextual hints to your interface without extra markup beyond a few data attributes and one JavaScript initialization loop. Next, you will learn how to style tabular data with Bootstrap's table classes.

Next Lesson →