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 Orbiora" data-ui-content="Airport transfers, tours and dinners are arranged before you arrive.">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="Flexible dates 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 holiday packages 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="Holiday packages" data-ui-content="Our team has done this many times, so you never have to guess." data-ui-trigger="focus">holiday packages</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="Our travel experts are on call around the clock while you are away." 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 11, 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 Apr 5, 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-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>#ORD-2214</td>
<td>$156.01</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 12 hours ago by Luna." data-ui-trigger="focus" data-ui-placement="left">Approved</a></td>
</tr>
<tr>
<td>#INV-8110</td>
<td>$586.70</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 4 min ago by Ella." data-ui-trigger="focus" data-ui-placement="left">Shipped</a></td>
</tr>
<tr>
<td>#PO-3175</td>
<td>$865.55</td>
<td><a tabindex="0" class="badge text-bg-light border no-underline" role="button" data-ui-toggle="popover" data-ui-title="Cancelled" data-ui-content="Last change just now by Owen." data-ui-trigger="focus" data-ui-placement="left">Cancelled</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="Zoe Ibrahim" data-ui-content="Support Specialist in Melbourne" aria-label="About Zoe Ibrahim"><img src="../assets/img/avatar-12.svg" class="rounded-full" width="48" height="48" alt="Zoe Ibrahim"></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="Flexible dates help you find quieter weeks and better prices. Members get room upgrades and late check-out at selected hotels. Free cancellation on most stays means you can book now and decide later."><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>Curated stays<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Curated stays" data-ui-content="Thousands of travellers already trust us, and we work hard to keep it that way." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Curated stays"><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>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="Every detail is handled by people who care about getting it right." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Best price guarantee"><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>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="Local guides show you the places that never make it into guidebooks." data-ui-trigger="focus" data-ui-placement="left" aria-label="About Best price guarantee"><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>Flexible dates<a tabindex="0" class="link-secondary ms-auto" role="button" data-ui-toggle="popover" data-ui-title="Flexible dates" 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 Flexible dates"><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.
We measure success by how many travellers come back and tell their friends.
Airport transfers, tours and dinners are arranged before you arrive.
<div class="border rounded-md p-4 overflow-auto" style="max-height:90px">
<p class="small">We measure success by how many travellers come back and tell their friends.</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">Airport transfers, tours and dinners are arranged before you arrive.</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>