Popovers and dialogs

[gfellerph]

Content displayed on top of the page with informative character, user flow control (cancel/confirm) or data entry forms.

Popovers with aria-roles assigned to them

Types of popovers:

Feature	Tooltip	Popup	Non-modal dialog1	Modal Dialog2
Description	Short hint or explanation	Larger explanation, additional content	Detailed information	Detailed information, forms
Possible content	Inline content	Inline content	Block and inline content	Forms, block content
Interactive content	❌	✅	✅	✅
Light dismiss	✅	✅	✅	❌
Traps focus	❌	❌	❌	✅
Anchored to trigger	✅	✅	❌	❌
Closes on X click	❌	✅	✅	✅
Closes on ESC	✅	✅	❌	✅
Opens on interest3	✅	❌	❌	❌
Opens on click	❌	✅	✅	✅

Ressources:

• Difference between dialog, modal and popover: https://hidde.blog/dialog-modal-popover-differences/

Popover & dialog anatomy

Popover and dialog anatomy diagram

Footnotes

1. <dialog> element opened with the .show() method or via popover attribute ↩

2. <dialog> element opened with the .showModal() method ↩

3. "interest" is shown by the user on hover, focus and long-press (tap on mobile) ↩