Content on hover or focus
Tooltips and hover cards must stay open long enough to reach and read, remain under the pointer, and close without forcing focus to move.
See it
What it is
Content on hover or focus is extra material that appears when a pointer rests on a trigger or keyboard focus reaches it: tooltips, help bubbles, submenus, and rich preview cards. WCAG says this revealed content must be dismissible without moving focus or the pointer, hoverable when the pointer can reach it, and persistent until the trigger is left, the user dismisses it, or the information is no longer valid.
Reach for the rule whenever revealed content covers something or needs time to read. Escape is the usual dismissal key. Keep the panel open while either trigger or panel is hovered, and while focus remains in the relevant controls, so someone can move into it, select text, zoom the page, or use a screen magnifier without racing a timer.
The classic gotcha is a dead strip between trigger and panel. The panel closes while the pointer crosses the gap, making its links impossible to reach. Amazon's mega dropdown solved this years ago with an invisible triangle stretching from the cursor to the far corners of the panel, keeping the submenu open while the pointer travels diagonally; Ben Kamens wrote it up in 2013 and the trick has been copied ever since. Treat both surfaces and the space between them as one hover region, never close on a short timeout, and do not put interactive controls inside a tooltip role.
Ask AI for it
Rebuild this hover or focus content to meet WCAG 2.2 SC 1.4.13. Open it on pointerenter and focusin, and keep it visible while the trigger or panel matches :hover or :focus-within. Remove automatic timeout closing and bridge any pointer gap between the two surfaces. Close it on Escape without moving focus, when hover and focus both leave, or when its information becomes invalid. Connect a noninteractive tooltip to its trigger with aria-describedby and role='tooltip'; if the revealed panel contains links, buttons, or form controls, use the HTML Popover API instead of a tooltip role. Verify that magnified text can be hovered, selected, and read without the panel disappearing.