Popovers and action menus
Avoid tooltip and focus traps
Use popovers for interactive panels, use real text for essential help, and test dismissal without inventing menu semantics.
Popover is a presentation behavior, not a complete tooltip, menu, combobox, or dialog. Each of those patterns has different expectations. My advice is to name the actual job before you pick an element.
Essential instructions belong in visible text. Brief supplemental text can link to a control through aria-describedby, but hover-only help excludes keyboard, touch, zoom, and speech-input users. An interactive panel belongs behind a button. It must be reachable, dismissible, and understandable without hover.
<p id="archive-help">Archived tasks remain available from the filter.</p>
<button type="button" aria-describedby="archive-help"
popovertarget="archive-options">Archive options</button>
<div id="archive-options" popover>
<button type="button">Archive this task</button>
</div>
The help text stays in the document whether or not the popover is open. That is the pattern I reach for first.
Avoid title as the only explanation. Its presentation is inconsistent and often unavailable to touch and keyboard users. Visible text is easier to discover, translate, select, zoom, and test.
Do not put a text input or multi-step form in a panel that disappears on an innocent outside click unless losing that work is expected and harmless. A dialog or inline region may fit better when the user is making substantial changes.
Test at 200% and 400% zoom, with keyboard only, and with reduced viewport height. The panel must not hide its last action off screen. Escape should dismiss an auto popover. Focus should land somewhere meaningful after the invoker or target is removed.
Audit every transient panel on the board. Write down whether it is optional help, an action group, a form, or a blocking decision. Keep only the action group as a popover. Move essential help into the document. Move blocking decisions into a dialog. Test with touch as well as hover, since touch makes hover-only assumptions obvious fast. If you need extensive key handling to fake a menu, go back to ordinary buttons and links.
Lesson completed