- Text labels that appear when a user hovers on, focuses on, or touches an element.
- Tooltips usually contain brief helper text about an element.
- Use Popover instead if you need to include actionable elements or longer content
- Use tooltips under the following conditions:
- For an element or control without a text label.
- When an element or control benefits from additional information.
- For additional Android guidelines on tooltips, refer here
- Use tooltips to provide helpful text that add to the user’s understanding of an element’s function.
- Use tooltips for interactive imagery.
- Use alt-attributes for static images.
- Trigger tooltips within 150ms of their activation from a source element.
- Tooltips should exit within 150ms of their source element losing focus.
- Keep the content of a tooltip short and to the point.
- If the content will occupy rows of text, consider embedding it within the view or using an alternative content disclosure element such as an accordion.
- Ensure that users can understand what information will be expanded by using clear, concise text descriptions
- Ensure that all interactions can be triggered by users who are navigating with a keyboard.
- Ensure that sufficient color contrast is used and that a focus state is provided so that the user knows which element they are on.
- Provide helper content to screen reader users using ARIA so that a user knows whether or not an element is expanded.
- Ensure that programmatic focus moves to the newly expanded content.
- Ensure that, when an “onhover” action is triggered, “onfocus” will also trigger the action.
- Keep in mind that in responsive environments, users with or without disabilities who zoom in to 200% will trigger the mobile view. If tooltip information is provided to desktop users, it will be necessary to make it available to all users – regardless of which type of device they are using.
- In addition to being able to open a tooltip from the keyboard, it is necessary to ensure that the tooltip can be closed from the keyboard – typically by using the esc key.
- Testing should be done to ensure that:
- The element with a tooltip can receive focus.
- The tooltip can be expanded and closed from only a keyboard.
- Information included in a tooltip is device-independent.
- Screen readers announce the tooltip when it is expanded, and do not announce the information when it is not open.