A Popover Starter
Click this button to show the popover.
<button popovertarget="pop">Show popover</button>
<p id="pop" popover>A top-layer overlay with additional information.</p>
The duration is intentionally slow so you can verify all the proper elements are transitioning .
That chunk of styles is how you
transition a
popover. Transitions are generally preferred because they can be interrupted,
dismissed, closed, or just have to deal with high demands of invoking;
elegantly.
In case you’re curious the difference betwen a popover and a dialog, or what it is to be modal, this blog post by Hidde has everything you need: https://hidde.blog/dialog-modal-popover-differences/