Register

Popovers

More about something, without leaving the page

A popover

Opens beside its button on click; closes with Escape or a click outside.

Show the code
<button type="button" class="btn" data-popover="pv-1" data-side="end">
<i class="ti ti-info-circle">
</i>What is the variance allowance?</button>
<div class="popover has-arrow" id="pv-1" aria-label="Variance allowance" hidden>
<div class="popover-head">
<b>Variance allowance</b>
</div>
<div class="card-body">
<p>A till can close up to $2.50 short or over without a manager. Set it in POS settings.</p>
</div>
</div>

With a list

Rows inside a popover, as the notifications in the top bar show them.

Show the code
<button type="button" class="btn" data-popover="pv-2" data-side="end">
<i class="ti ti-truck">
</i>Deliveries tomorrow</button>
<div class="popover has-arrow" id="pv-2" aria-label="Deliveries tomorrow" hidden>
<div class="popover-head">
<b>Deliveries tomorrow</b>
</div>
<ul class="list">
<li>
<span class="list-ico" aria-hidden="true">
<i class="ti ti-truck-delivery">
</i>
</span>
<div class="grow">
<b>Fresh Valley Dairy</b>
<small>PO-1060 · Market Street</small>
</div>
</li>
<li>
<span class="list-ico" aria-hidden="true">
<i class="ti ti-truck-delivery">
</i>
</span>
<div class="grow">
<b>Golden Crust Bakery</b>
<small>PO-1057 · Market Street</small>
</div>
</li>
</ul>
</div>