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 Halois Co" data-ui-content="Every trip supports local businesses and responsible tourism.">Click to toggle popover</button>2Four directions
<code>data-ui-placement</code> chooses top, right, bottom or left.
<div class="d-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="24/7 assistance 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="d-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 guided tours 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-ui-toggle="popover" data-ui-title="Guided tours" data-ui-content="We measure success by how many travellers come back and tell their friends." data-ui-trigger="focus">guided tours</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-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="Family rooms, adults-only retreats and pet-friendly stays in one search." 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="d-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 Jul 22, 2026" 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 Nov 20, 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 d-flex align-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-8931</td>
<td>$302.87</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-ui-toggle="popover" data-ui-title="Overdue" data-ui-content="Last change yesterday by Mason." data-ui-trigger="focus" data-ui-placement="left">Overdue</a></td>
</tr>
<tr>
<td>#ORD-9357</td>
<td>$231.24</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-ui-toggle="popover" data-ui-title="Active" data-ui-content="Last change 11 hours ago by Finn." data-ui-trigger="focus" data-ui-placement="left">Active</a></td>
</tr>
<tr>
<td>#ORD-9482</td>
<td>$419.80</td>
<td><a tabindex="0" class="badge text-bg-light border text-decoration-none" role="button" data-ui-toggle="popover" data-ui-title="Overdue" data-ui-content="Last change just now by Chloe." 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-circle" data-ui-toggle="popover" data-ui-placement="right" data-ui-title="Lea Nguyen" data-ui-content="Content Writer in Austin" aria-label="About Lea Nguyen"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="48" height="48" alt="Lea Nguyen"></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="Start in minutes and get help from a real person whenever you need it. Travel insurance and car rental can be added in a single click. Our team has done this many times, so you never have to guess."><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="d-flex align-items-center gap-2 mb-2"><span class="text-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Best price guarantee<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Best price guarantee" data-ui-content="From city breaks to safaris, we plan trips around how you like to travel." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Best price guarantee"><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>Curated stays<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Curated stays" data-ui-content="Members get room upgrades and late check-out at selected hotels." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Curated stays"><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>Free cancellation<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Free cancellation" data-ui-content="Flexible dates help you find quieter weeks and better prices." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Free cancellation"><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>Flexible dates<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Flexible dates" data-ui-content="Our travel experts are on call around the clock while you are away." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Flexible dates"><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.
We listen first, then build a plan around what you actually need.
We find the best price, and if you see it cheaper we match it.
<div class="border rounded p-3 overflow-auto" style="max-height:90px">
<p class="small">We listen first, then build a plan around what you actually need.</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">We find the best price, and if you see it cheaper we match it.</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>