Tooltip

Tooltips provide brief, contextual information when users hover over or focus on an element. They enhance usability by offering additional details or instructions without cluttering the interface.

Overview

Tooltips are lightweight components used to offer additional, contextual information that assists users without interrupting their current workflow. They are often triggered by hovering or focusing on an element.

When to use

• Use tooltips to provide extra context or explanations for icons or buttons where the meaning may not be immediately clear to users.

• Use tooltips to give additional information in a form or input field to clarify what kind of data is required, enhancing usability without taking up screen space.

• Use tooltips when you want to keep the interface clean and simple while still offering users access to helpful information on demand.

• Use to display instructions or warnings related to specific actions, ensuring users have the right details before proceeding.

• Use tooltips to clarify the function of disabled buttons or elements by explaining why they’re inactive, helping users understand potential next steps.

When not to use

• Avoid using tooltips for essential information that users need to interact with or act upon immediately, as tooltips are not permanent and may not hold attention long enough.

• Avoid relying on tooltips for mobile interfaces, where touch interactions replace hover states, potentially making the tooltip less accessible to users.

• Avoid using tooltips to convey large blocks of text or detailed instructions that require more space to be understood clearly.

• Avoid showing tooltips on elements that are already well-explained or self-explanatory, as this creates unnecessary redundancy.

• Avoid confusing tooltips with popovers; tooltips are brief, lightweight, and typically for hovering/focus states, while popovers provide more detailed, persistent information with actions or interactions.

Anatomy

1. Pointer: A small triangular element pointing from the tooltip to the trigger element, indicating the tooltip's origin or association.

2. Container: The main body of the tooltip that holds and displays the content, adapting its size to fit the text.

3. Text: The content or message inside the tooltip, providing the necessary context, instructions, or explanation related to the hovered or focused element.

Alignment

Size

Size	Text (px)	Corner (px)	Container Height (px)
Default	14	4	33

Accessibility

• Keyboard Accessibility: Ensure tooltips are accessible via keyboard navigation, and they appear when users focus on the trigger element, not just when hovered.

• Screen Reader Support: Provide meaningful text for screen readers, ensuring that visually impaired users can also access the information within the tooltip.

• Sufficient Timing: Tooltips should remain visible long enough for users to read, especially for users with slower reading speeds or cognitive disabilities.

• Contrast and Readability: Ensure there is enough contrast between the tooltip text and its background to make it easily readable for users with visual impairments.

• Consistent Activation: Use consistent activation methods, like hover or focus, and make sure that the tooltip closes when the user moves away from the trigger element.

Example

• Form Field Guidance: Display additional explanations or guidelines for specific fields when users hover over input fields, such as "Enter your username with at least 6 characters."

• Icon Clarification: Provide quick descriptions for icons that might not be self-explanatory, such as explaining a gear icon as “Settings.”

• Button Information: When users hover over buttons, a tooltip can explain the button's action, such as “Click to submit your form.”

• Abbreviations or Terms: Offer explanations for technical terms or abbreviations, giving users more context without leaving the page.

• Feature Descriptions: When introducing a new feature, use tooltips to guide users through various elements and actions within the interface.