Popovers are small overlays with a title and a few lines of content, opened by click, hover or focus. Use them for hints, definitions and details that do not deserve a whole dialog; the examples cover placements, triggers, disabled elements, custom styles and real interface spots.
1Basic popover
Click the button to toggle a popover with a title and content.
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="About Cora Labs" data-bs-content="Set approval rules for large payments and see who spent what, and why.">Click to toggle popover</button>2Four directions
<code>data-bs-placement</code> chooses top, right, bottom or left.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Popover on the top." data-bs-placement="top">Popover on top</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Popover on the right." data-bs-placement="right">Popover on right</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Popover on the bottom." data-bs-placement="bottom">Popover on bottom</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Popover on the left." data-bs-placement="left">Popover on left</button>
</div>3Dismiss on next click
<code>data-bs-trigger="focus"</code> closes the popover when the user clicks anywhere else. Use an <code>a</code> with <code>tabindex</code>.
<a tabindex="0" class="btn btn-outline-danger" role="button" data-bs-toggle="popover" data-bs-title="Dismissible popover" data-bs-content="Click anywhere to close me." data-bs-trigger="focus">Dismissible popover</a>4Hover trigger
<code>data-bs-trigger="hover focus"</code> opens on mouse hover and on keyboard focus.
<button type="button" class="btn btn-outline-primary" data-bs-toggle="popover" data-bs-title="Quick facts" data-bs-content="Bank-grade encryption is included in every plan." data-bs-trigger="hover focus"><i class="bi bi-cursor" aria-hidden="true"></i> Hover me</button>5Disabled element
Disabled buttons do not fire events, so wrap them in a focusable span that carries the popover.
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Finish your profile to unlock this.">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>6In running text
A popover on an inline link explains a term without leaving the sentence.
Every order includes multi-currency wallets at no extra cost, and you can cancel at any time.
<p class="mb-0">Every order includes <a tabindex="0" class="link-primary text-decoration-underline" role="button" data-bs-toggle="popover" data-bs-title="Multi-currency wallets" data-bs-content="We keep things simple, so you can focus on what matters to you." data-bs-trigger="focus">multi-currency wallets</a> at no extra cost, and you can cancel at any time.</p>7Help icon
A small round icon button next to a heading opens a hint.
Monthly budget
<div class="d-flex align-items-center gap-2">
<h3 class="h6 mb-0">Monthly budget</h3>
<button type="button" class="btn btn-link p-0 link-secondary" data-bs-toggle="popover" data-bs-title="How it works" data-bs-content="We sum all invoices that are due this month." data-bs-placement="right" aria-label="Help"><i class="bi bi-question-circle" aria-hidden="true"></i></button>
</div>8Content only
Leave out <code>data-bs-title</code> for a popover without a header.
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-content="Friendly people answer your questions quickly, by phone, chat or email." data-bs-placement="bottom">No title</button>9Custom style
<code>data-bs-custom-class</code> adds a class to the popover so you can theme it.
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Branded popover" data-bs-content="Uses the template primary colour." data-bs-custom-class="cb-popover">Custom popover</button>10Status buttons
Small outline buttons whose popovers explain each status.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="popover" data-bs-title="Paid" data-bs-content="Received on Jan 31, 2026" data-bs-placement="top">Paid</button>
<button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="popover" data-bs-title="Pending" data-bs-content="Waiting for approval" data-bs-placement="top">Pending</button>
<button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="popover" data-bs-title="Overdue" data-bs-content="Was due on Sep 30, 2026" data-bs-placement="top">Overdue</button>
<button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="popover" data-bs-title="Draft" data-bs-content="Not sent yet" data-bs-placement="top">Draft</button>
</div>11Form label hint
An info icon in a label explains what to enter.
<div style="max-width:360px">
<label for="pop-field-1115" class="form-label d-flex align-items-center gap-1">Tax number <a tabindex="0" class="link-secondary" role="button" data-bs-toggle="popover" data-bs-content="You find it on the top right of your last tax notice." data-bs-trigger="focus" aria-label="About the tax number"><i class="bi bi-info-circle" aria-hidden="true"></i></a></label>
<input type="text" class="form-control" id="pop-field-1115">
</div>12In a table
Status badges in a table reveal details in a popover.
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD-2971</td>
<td>$269.65</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-bs-toggle="popover" data-bs-title="Cancelled" data-bs-content="Last change 2 days ago by Ethan." data-bs-trigger="focus" data-bs-placement="left">Cancelled</a></td>
</tr>
<tr>
<td>#PO-2401</td>
<td>$499.95</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-bs-toggle="popover" data-bs-title="In review" data-bs-content="Last change 47 min ago by Ella." data-bs-trigger="focus" data-bs-placement="left">In review</a></td>
</tr>
<tr>
<td>#PO-8610</td>
<td>$473.25</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-bs-toggle="popover" data-bs-title="Draft" data-bs-content="Last change 37 min ago by Hana." data-bs-trigger="focus" data-bs-placement="left">Draft</a></td>
</tr>
</tbody>
</table>
</div>13User card
Clicking an avatar shows the person's name, role and city.
<button type="button" class="btn p-0 border-0 rounded-circle" data-bs-toggle="popover" data-bs-placement="right" data-bs-title="Lea Larsen" data-bs-content="Customer Success in Kyoto" aria-label="About Lea Larsen"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="48" height="48" alt="Lea Larsen"></button>14Long content
Popovers wrap longer text up to their maximum width.
<button type="button" class="btn btn-outline-dark" data-bs-toggle="popover" data-bs-title="Release notes" data-bs-content="Send and receive money in more than 30 currencies at fair exchange rates. Thousands of members already trust us, and we work hard to keep it that way. Cash flow forecasts show where you will be next month, not just today."><i class="bi bi-journal-text" aria-hidden="true"></i> What's new</button>15Auto placement
<code>data-bs-placement="auto"</code> lets the popover pick the side with the most room.
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-title="Auto" data-bs-content="I chose the best side for the current viewport." data-bs-placement="auto">Auto placed</button>16Offset
<code>data-bs-offset="0,16"</code> moves the popover further from its trigger.
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-content="Sixteen pixels away from the button." data-bs-offset="0,16">Offset popover</button>17Feature list
Info icons in a pricing list explain each feature.
<div class="card" style="max-width:340px">
<div class="card-body">
<h3 class="h6">Pro plan</h3>
<ul class="list-unstyled mb-0">
<li class="d-flex align-items-center gap-2 mb-2"><span class="text-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>No hidden fees<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="No hidden fees" data-bs-content="Start in minutes and get help from a real person whenever you need it." data-bs-trigger="focus" data-bs-placement="left" aria-label="About No hidden fees"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="d-flex align-items-center gap-2 mb-2"><span class="text-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Instant notifications<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Instant notifications" data-bs-content="Payroll runs on time, with tax and pension payments handled for you." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Instant notifications"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="d-flex align-items-center gap-2 mb-2"><span class="text-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Bank-grade encryption<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Bank-grade encryption" data-bs-content="Every detail is handled by people who care about getting it right." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Bank-grade encryption"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="d-flex align-items-center gap-2 mb-2"><span class="text-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Bank-grade encryption<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Bank-grade encryption" data-bs-content="We measure success by how many members come back and tell their friends." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Bank-grade encryption"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>18Toolbar
Popovers on buttons of a button group give each tool a short explanation.
<div class="btn-group" role="group" aria-label="Editor tools">
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-title="Bold" data-bs-content="Make the selected text bold." data-bs-placement="bottom" data-bs-trigger="hover focus" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-title="Italic" data-bs-content="Slant the selected text." data-bs-placement="bottom" data-bs-trigger="hover focus" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-title="Link" data-bs-content="Turn the text into a link." data-bs-placement="bottom" data-bs-trigger="hover focus" aria-label="Link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
</div>19Escape a scrolling box
<code>data-bs-container="body"</code> renders the popover outside an <code>overflow</code> container so it is not cut off.
No monthly fees on the basic plan and no hidden charges on transfers.
Our team has done this many times, so you never have to guess.
<div class="border rounded p-3 overflow-auto" style="max-height:90px">
<p class="small">No monthly fees on the basic plan and no hidden charges on transfers.</p>
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="popover" data-bs-title="Not clipped" data-bs-content="Attached to the body element." data-bs-container="body">Open popover</button>
<p class="small mt-2 mb-0">Our team has done this many times, so you never have to guess.</p>
</div>20Input focus hint
A focus-triggered popover on an input lists the password rules while typing.
<div style="max-width:320px">
<label for="pop-pass-1116" class="form-label">New password</label>
<input type="password" class="form-control" id="pop-pass-1116" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" data-bs-title="Password rules" data-bs-content="At least 10 characters, one number and one symbol." autocomplete="new-password">
</div>