Skip to component content

Popover

Add compact, contextual details to workflow actions with Bootstrap's native popover behavior.

Usage

Use data-bs-toggle="popover" for compact contextual details attached to a clear, focusable trigger. Provide a concise title, body content, or both with Bootstrap popover attributes, and choose a placement that keeps the popover close to the action without covering the work the user is reviewing.

Initialize popovers only on pages that use them; Bootstrap keeps them opt-in for performance. Use container="body" or another explicit container when the trigger sits inside complex layouts such as input groups, button groups, tables, or dialogs where clipping and focus containment can matter.

Keep critical confirmations, long forms, and required instructions outside popovers. Bootstrap sanitizes HTML content, disabled elements need a wrapper trigger, and the popover should be hidden before its trigger is removed from the DOM.

Basic

Use popover_title and popover_content on a standard button trigger for quick inline context.

Popover 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-title="Routing review" data-bs-content="Approve this request, reassign it, or return it for clarification." data-bs-placement="top">Review update</button>

Placement

Set popover_placement to top, right, bottom, or left to position the popover close to the action.

Popover 
<div class="d-flex flex-wrap gap-2">
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-content="Keep the action rail visible while reviewing this item." data-bs-placement="top">Top</button>
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-content="Open queue details to the right when space is available." data-bs-placement="right">Right</button>
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-content="Show helper text underneath the current control." data-bs-placement="bottom">Bottom</button>
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-content="Reserve space on the left for this control-heavy view." data-bs-placement="left">Left</button>
</div>

Rich content

Set popover_html=true to format body content. Bootstrap still applies its default sanitizer, so stay with allowlisted tags like <strong> and <code>.

Popover 
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="popover" data-bs-title="Queue notes" data-bs-content="Review &lt;strong&gt;priority rules&lt;/strong&gt; and &lt;code&gt;follow-up notes&lt;/code&gt; before owners change." data-bs-placement="top" data-bs-html="true">View guidance</button>

Dismiss on next click

Bootstrap's focus-triggered dismiss pattern uses an <a> element with tabindex="0", data-bs-trigger="focus", and the documented popover attributes rather than a button.

Popover
Dismiss details 
<a
    href="#!"
    role="button"
    tabindex="0"
    class="btn btn-outline-secondary"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-placement="top"
data-bs-title="Dismissible note"    data-bs-content="Click anywhere outside this panel to close it."
  >
  Dismiss details
</a>

Disabled trigger

A disabled control does not receive pointer or focus events, so attach the popover to a focusable <span> wrapper.

Popover 
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="This action is currently unavailable">
  <button class="btn btn-outline-secondary" type="button" disabled>Archive</button>
</span>

RTL

Compare Arabic, Hebrew, and English popover triggers in the same review workflow.

<div dir="rtl">
  <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="popover" data-bs-title="ملاحظة المراجعة" data-bs-content="تحقق من هذه الخطوة قبل إرسال الإشعار النهائي." data-bs-placement="bottom">فتح ملاحظة المراجعة</button>
</div>
<div dir="rtl">
  <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="popover" data-bs-title="הערת ביקורת" data-bs-content="בדוק את הצעד לפני שליחת ההתרעה הסופית." data-bs-placement="bottom">פתח הערת ביקורת</button>
</div>
<div dir="ltr">
  <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="popover" data-bs-title="Review note" data-bs-content="Check this step before sending the final notice." data-bs-placement="bottom">Open review note</button>
</div>

Component reference

Status
Accepted
Runtime
Bootstrap plugin
Markup
Bootstrap/native HTML
Reference

For Bootstrap's Popover plugin options, positioning, and accessibility notes, see the Bootstrap Popovers documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.