Modals first.

Modals using <dialog>

Modals with <dialog>

Popovers

Since we’ve just been discussing positioning elements with respect to other elements (and using the id attribute to give elements a unique reference or ‘handle’), it’s a good time to introduce a modern way of placing content adjacent to an element to contextually reveal related information: the ‘popover’.

A popover is a common design pattern that is used to draw a user’s attention to something.

Before we get too deep, let’s clarify a couple of terms.

Popovers created using the Popover API are always non-modal.

• modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).
• non-modal, meaning that the rest of the page can be interacted with while the popover is being shown.

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Simple Popover example: