Popovers
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 Brand name 8" data-bs-content="A practical update turns you focused on what matters from the very first day.">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="Dark mode 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 secure file sharing 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="Single sign-on" data-bs-content="A clear project turns customers coming back from the very first day." data-bs-trigger="focus">secure file sharing</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="Our team analytics turns you focused on what matters in just a few clicks." 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 Oct 16, 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 Nov 22, 2025" 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>#TX-7707</td>
<td>$658.37</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-bs-toggle="popover" data-bs-title="Pending" data-bs-content="Last change yesterday by Owen." data-bs-trigger="focus" data-bs-placement="left">Pending</a></td>
</tr>
<tr>
<td>#TX-8601</td>
<td>$101.48</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 23 min ago by Mason." data-bs-trigger="focus" data-bs-placement="left">Draft</a></td>
</tr>
<tr>
<td>#TX-9548</td>
<td>$714.78</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-bs-toggle="popover" data-bs-title="Completed" data-bs-content="Last change just now by Ethan." data-bs-trigger="focus" data-bs-placement="left">Completed</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="Leo Sato" data-bs-content="Marketing Lead in Copenhagen" aria-label="About Leo Sato"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="48" height="48" alt="Leo Sato"></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="This flexible experience lets you focused on what matters from the very first day. The new real-time collaboration brings data easy to understand at a fair price. A elegant release makes customers coming back from the very first day."><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>99.99% uptime<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="99.99% uptime" data-bs-content="The new 99.99% uptime brings results you can measure wherever you are." data-bs-trigger="focus" data-bs-placement="left" aria-label="About 99.99% uptime"><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>Dark mode<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Dark mode" data-bs-content="This modern experience connects new ideas to life with friendly support." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Dark mode"><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>Role-based access<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Role-based access" data-bs-content="The new audit trail gives every detail in view from the very first day." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Role-based access"><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>Role-based access<a tabindex="0" class="link-secondary ms-auto" role="button" data-bs-toggle="popover" data-bs-title="Role-based access" data-bs-content="A elegant workflow shows time back in your day with friendly support." data-bs-trigger="focus" data-bs-placement="left" aria-label="About Role-based access"><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.
A friendly team makes customers coming back without extra tools.
A powerful routine makes the whole team on the same page without the usual hassle.
<div class="border rounded p-3 overflow-auto" style="max-height:90px">
<p class="small">A friendly team makes customers coming back without extra tools.</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">A powerful routine makes the whole team on the same page without the usual hassle.</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>