What is a tooltip in UX design?
A tooltip is a small UI element that appears temporarily when a user hovers over or focuses on an interface element, providing additional context or information about that element. Tooltips are transient and disappear when the user moves focus or cursor away. They are commonly used to label icon-only buttons, clarify abbreviated content, explain disabled states, or provide supplementary detail that would clutter the interface if displayed permanently.
When should you use tooltips in UX design?
Tooltips are appropriate for providing labels for icon-only buttons that are not universally recognizable, explaining why an element is disabled, clarifying truncated content, or offering optional contextual detail for advanced users. They are not appropriate as the primary label for critical interface elements, for content that all users need to complete a task, or as a workaround for interfaces that are inherently unclear. If users need a tooltip to understand how to use an element, the element itself may need to be redesigned.
What are the accessibility requirements for tooltips?
Tooltips must be accessible to keyboard users as well as mouse users, triggering on focus as well as hover. They must be announced to screen readers using appropriate ARIA roles and attributes. Tooltip content must meet color contrast requirements. Tooltips must not disappear before users have had time to read them. Touch device users cannot hover, so critical information in tooltips must also be accessible through another mechanism. These constraints significantly limit the appropriate use cases for tooltips on mobile interfaces.
What is the difference between a tooltip and a popover?
A tooltip is transient, triggered on hover or focus, contains only brief supplementary text, and does not contain interactive elements. A popover is triggered by a click or tap, can contain interactive elements such as buttons and links, persists until explicitly dismissed, and is appropriate for richer contextual content. Tooltips inform. Popovers enable action.