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 Pixel Nest" data-ui-content="Every piece is made in small batches from materials we test ourselves.">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="Hand-checked quality is included in every plan." data-ui-trigger="hover focus"><i class="bi bi-cursor-fill" 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 loyalty rewards 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="Free shipping" data-ui-content="We measure success by how many shoppers come back and tell their friends." data-ui-trigger="focus">loyalty rewards</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-fill" 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="Not sure about the size? Our fit guide and live chat help you choose." 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 19, 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 Oct 11, 2025" 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-fill" 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>#INV-1127</td>
<td>$647.85</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 just now by Owen." data-ui-trigger="focus" data-ui-placement="left">Overdue</a></td>
</tr>
<tr>
<td>#TX-7824</td>
<td>$774.35</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="Shipped" data-ui-content="Last change yesterday by Zoe." data-ui-trigger="focus" data-ui-placement="left">Shipped</a></td>
</tr>
<tr>
<td>#INV-9222</td>
<td>$886.96</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="In review" data-ui-content="Last change yesterday by Nadia." data-ui-trigger="focus" data-ui-placement="left">In review</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="Ella Lindqvist" data-ui-content="QA Engineer in Singapore" aria-label="About Ella Lindqvist"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="48" height="48" alt="Ella Lindqvist"></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="Every detail is handled by people who care about getting it right. Gift wrapping and a handwritten note are free on every order. Pay securely with card, wallet or in three interest-free instalments."><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>Easy exchanges<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Easy exchanges" data-ui-content="Friendly people answer your questions quickly, by phone, chat or email." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Easy exchanges"><i class="bi bi-info-circle-fill" 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>Easy exchanges<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Easy exchanges" data-ui-content="Thousands of five-star reviews from customers who came back for more." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Easy exchanges"><i class="bi bi-info-circle-fill" 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>Hand-checked quality<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Hand-checked quality" data-ui-content="Our packaging is plastic-free and every delivery is carbon-neutral." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Hand-checked quality"><i class="bi bi-info-circle-fill" 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>Hand-checked quality<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Hand-checked quality" data-ui-content="Clear prices, honest advice and no surprises along the way." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Hand-checked quality"><i class="bi bi-info-circle-fill" 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.
Every piece is made in small batches from materials we test ourselves.
Free shipping on orders over $50 and easy returns within 30 days.
<div class="border rounded-md p-4 overflow-auto" style="max-height:90px">
<p class="small">Every piece is made in small batches from materials we test ourselves.</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">Free shipping on orders over $50 and easy returns within 30 days.</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>