Popovers
A little more, on request
Basic
Shipping
Free on orders over $50. Arrives in two to four working days.
Code
<div class="popover-anchor">
<button type="button" class="btn btn-gray" data-popover="pop-1" aria-expanded="false" aria-controls="pop-1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Show info</button><div class="popover glass" id="pop-1" role="dialog" aria-label="Shipping" hidden><div class="popover-head"><b>Shipping</b></div><div class="popover-body"><p>Free on orders over $50. Arrives in two to four working days.</p></div></div>
</div>Placements
Opens to the top
Popovers keep inside the window.
Opens to the bottom
Popovers keep inside the window.
Code
<div class="popover-anchor">
<button type="button" class="btn btn-gray" data-popover="pop-top" aria-expanded="false" aria-controls="pop-top">Top</button><div class="popover glass" id="pop-top" role="dialog" aria-label="Opens to the top" hidden><div class="popover-head"><b>Opens to the top</b></div><div class="popover-body"><p>Popovers keep inside the window.</p></div></div>
</div>
<div class="popover-anchor">
<button type="button" class="btn btn-gray" data-popover="pop-bottom" aria-expanded="false" aria-controls="pop-bottom">Bottom</button><div class="popover glass" id="pop-bottom" role="dialog" aria-label="Opens to the bottom" hidden><div class="popover-head"><b>Opens to the bottom</b></div><div class="popover-body"><p>Popovers keep inside the window.</p></div></div>
</div>