Dropdowns, Popups, and Tooltips
- Kim Collins (Unlicensed)
- David Fourney (Unlicensed)
Content that is revealed on focus and/or hover (such as custom tooltips, sub-menus, nonmodal popups that display on hover and focus - referred to on this page as "popups") can present a variety of challenges to different groups of users.
- People who have difficulty controlling the mouse (e.g. due to tremor) need a large target area to click or hover, and can find popups difficult to trigger and to dismiss.
- People who use magnification software may need to scroll to see the entire content of a popup. The popup must remain visible and must allow these users to scroll as long as their hover or focus is on the popup content.
- Keyboard users, users of magnification software, and others may have difficulty dismissing a popup. This is particularly challenging when the popup is covering other page content.
- Users with cognitive disabilities may be distracted from their task when a popup is triggered. They need a way to quickly remove distracting content.
For these reasons, any content that is revealed on focus and/or hover of a trigger element must be:
Dismissable - recommended approach is to ensure the ESC key will close the content. This allows users to continue to read any surrounding content without having to move their mouse or keyboard focus.
Hoverable - the user must be able to hover over the content that has been exposed; for example, if the user clicks a button and a popup opens, the user must be able to hover over the popup without the popup disappearing.
Persistent - the exposed content does not disappear unless: a) the user removes focus/hover, or b) the user dismisses the exposed content, or c) the exposed content becomes obsolete.
For a custom tooltip demo that meets all three criteria see Heydon Pickering's article on Tooltips & Toggletips.