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-ui-toggle="popover" data-ui-title="About Umbra" data-ui-content="Friendly people answer your questions quickly, by phone, chat or email.">Click to toggle popover</button>2Four directions
<code>data-ui-placement</code> chooses top, right, bottom or left.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-secondary" data-ui-toggle="popover" data-ui-content="Popover on the top." data-ui-placement="top">Popover on top</button>
<button type="button" class="btn btn-secondary" data-ui-toggle="popover" data-ui-content="Popover on the right." data-ui-placement="right">Popover on right</button>
<button type="button" class="btn btn-secondary" data-ui-toggle="popover" data-ui-content="Popover on the bottom." data-ui-placement="bottom">Popover on bottom</button>
<button type="button" class="btn btn-secondary" data-ui-toggle="popover" data-ui-content="Popover on the left." data-ui-placement="left">Popover on left</button>
</div>3Dismiss on next click
<code>data-ui-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-ui-toggle="popover" data-ui-title="Dismissible popover" data-ui-content="Click anywhere to close me." data-ui-trigger="focus">Dismissible popover</a>4Hover trigger
<code>data-ui-trigger="hover focus"</code> opens on mouse hover and on keyboard focus.
<button type="button" class="btn btn-outline-primary" data-ui-toggle="popover" data-ui-title="Quick facts" data-ui-content="Online results is included in every plan." data-ui-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="inline-block" tabindex="0" data-ui-toggle="popover" data-ui-trigger="hover focus" data-ui-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 physiotherapy at no extra cost, and you can cancel at any time.
<p class="mb-0">Every order includes <a tabindex="0" class="link-primary underline" role="button" data-ui-toggle="popover" data-ui-title="General practice" data-ui-content="Thousands of patients already trust us, and we work hard to keep it that way." data-ui-trigger="focus">physiotherapy</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="flex items-center gap-2">
<h3 class="h6 mb-0">Monthly budget</h3>
<button type="button" class="btn btn-link p-0 link-secondary" data-ui-toggle="popover" data-ui-title="How it works" data-ui-content="We sum all invoices that are due this month." data-ui-placement="right" aria-label="Help"><i class="bi bi-question-circle" aria-hidden="true"></i></button>
</div>8Content only
Leave out <code>data-ui-title</code> for a popover without a header.
<button type="button" class="btn btn-outline-secondary" data-ui-toggle="popover" data-ui-content="Our team has done this many times, so you never have to guess." data-ui-placement="bottom">No title</button>9Custom style
<code>data-ui-custom-class</code> adds a class to the popover so you can theme it.
<button type="button" class="btn btn-primary" data-ui-toggle="popover" data-ui-title="Branded popover" data-ui-content="Uses the template primary colour." data-ui-custom-class="cb-popover">Custom popover</button>10Status buttons
Small outline buttons whose popovers explain each status.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-sm btn-outline-success" data-ui-toggle="popover" data-ui-title="Paid" data-ui-content="Received on Nov 13, 2025" data-ui-placement="top">Paid</button>
<button type="button" class="btn btn-sm btn-outline-warning" data-ui-toggle="popover" data-ui-title="Pending" data-ui-content="Waiting for approval" data-ui-placement="top">Pending</button>
<button type="button" class="btn btn-sm btn-outline-danger" data-ui-toggle="popover" data-ui-title="Overdue" data-ui-content="Was due on Jul 11, 2026" data-ui-placement="top">Overdue</button>
<button type="button" class="btn btn-sm btn-outline-info" data-ui-toggle="popover" data-ui-title="Draft" data-ui-content="Not sent yet" data-ui-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 flex items-center gap-1">Tax number <a tabindex="0" class="link-secondary" role="button" data-ui-toggle="popover" data-ui-content="You find it on the top right of your last tax notice." data-ui-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-6230</td>
<td>$680.70</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="Pending" data-ui-content="Last change 55 min ago by Luna." data-ui-trigger="focus" data-ui-placement="left">Pending</a></td>
</tr>
<tr>
<td>#TX-6558</td>
<td>$718.71</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="Approved" data-ui-content="Last change just now by Isla." data-ui-trigger="focus" data-ui-placement="left">Approved</a></td>
</tr>
<tr>
<td>#TX-3662</td>
<td>$589.09</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="Overdue" data-ui-content="Last change 4 hours ago by Aria." data-ui-trigger="focus" data-ui-placement="left">Overdue</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-full" data-ui-toggle="popover" data-ui-placement="right" data-ui-title="Luna Rossi" data-ui-content="Backend Engineer in Barcelona" aria-label="About Luna Rossi"><img src="../assets/img/avatar-5.svg" class="rounded-full" width="48" height="48" alt="Luna Rossi"></button>14Long content
Popovers wrap longer text up to their maximum width.
<button type="button" class="btn btn-outline-dark" data-ui-toggle="popover" data-ui-title="Release notes" data-ui-content="We listen first, then build a plan around what you actually need. Friendly reminders make sure you never miss a check-up or a dose. Your records are private, secure and always available when you need them."><i class="bi bi-journal-text" aria-hidden="true"></i> What's new</button>15Auto placement
<code>data-ui-placement="auto"</code> lets the popover pick the side with the most room.
<button type="button" class="btn btn-info" data-ui-toggle="popover" data-ui-title="Auto" data-ui-content="I chose the best side for the current viewport." data-ui-placement="auto">Auto placed</button>16Offset
<code>data-ui-offset="0,16"</code> moves the popover further from its trigger.
<button type="button" class="btn btn-warning" data-ui-toggle="popover" data-ui-content="Sixteen pixels away from the button." data-ui-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="flex items-center gap-2 mb-2"><span class="text-success-emphasis"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Same-day appointments<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Same-day appointments" data-ui-content="Book online in two minutes and see a doctor as soon as today." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Same-day appointments"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="flex items-center gap-2 mb-2"><span class="text-success-emphasis"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Same-day appointments<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Same-day appointments" data-ui-content="We keep things simple, so you can focus on what matters to you." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Same-day appointments"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="flex items-center gap-2 mb-2"><span class="text-success-emphasis"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Insurance friendly<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Insurance friendly" data-ui-content="We work with most insurance providers and explain any costs upfront." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Insurance friendly"><i class="bi bi-info-circle" aria-hidden="true"></i></a></li>
<li class="flex items-center gap-2 mb-2"><span class="text-success-emphasis"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Certified specialists<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Certified specialists" data-ui-content="Same-day appointments are available for urgent needs on weekdays." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Certified specialists"><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-ui-toggle="popover" data-ui-title="Bold" data-ui-content="Make the selected text bold." data-ui-placement="bottom" data-ui-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-ui-toggle="popover" data-ui-title="Italic" data-ui-content="Slant the selected text." data-ui-placement="bottom" data-ui-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-ui-toggle="popover" data-ui-title="Link" data-ui-content="Turn the text into a link." data-ui-placement="bottom" data-ui-trigger="hover focus" aria-label="Link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
</div>19Escape a scrolling box
<code>data-ui-container="body"</code> renders the popover outside an <code>overflow</code> container so it is not cut off.
Lab results arrive in your patient portal, usually within 48 hours.
Video consultations let you speak with a doctor from the comfort of home.
<div class="border rounded-md p-4 overflow-auto" style="max-height:90px">
<p class="small">Lab results arrive in your patient portal, usually within 48 hours.</p>
<button type="button" class="btn btn-sm btn-primary" data-ui-toggle="popover" data-ui-title="Not clipped" data-ui-content="Attached to the body element." data-ui-container="body">Open popover</button>
<p class="small mt-2 mb-0">Video consultations let you speak with a doctor from the comfort of home.</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-ui-toggle="popover" data-ui-trigger="focus" data-ui-placement="right" data-ui-title="Password rules" data-ui-content="At least 10 characters, one number and one symbol." autocomplete="new-password">
</div>