Tooltip
Brief, contextual info when users hover or focus on an element, enhancing clarity without cluttering the interface. Typically used to explain icons, buttons, or any interactive elements where the meaning might not be immediately clear.
- Trigger area: It's recommended to widen the trigger space to make it easier for the cursor to hover.
- Tooltip: The text provides additional context or guidance, ensuring users can easily understand the function or meaning
Minimum trigger size
- Trigger area (Don’t): A small trigger area negatively impacts the user experience by making it harder for users to hover and access tooltips efficiently.
- Trigger area (Do): Ensuring a larger trigger area improves usability, making it easier for users to hover and access the tooltip content seamlessly.
Tooltip direction
- Direction = Left.
- Direction = Top.
- Direction = Bottom.
- Direction = Right.
Note: The blue outline is used to illustrate the trigger area. Remove it on actual UI.
Tooltip alignment
- Align = Left when the trigger is at the left edge of the screen and ensures it remains visible and doesn’t extend off-screen.
- Align = Center the trigger element is located in the central area of the screen.
- Align = Right when the trigger is at the right edge of the screen and ensures it remains visible and doesn’t extend off-screen.
Always choose alignment that ensures the tooltip stays within the visible screen area.
Note: The blue outline is used to illustrate the trigger area. Remove it on actual UI.
Description length
Always choose alignment that ensures the tooltip stays within the visible screen area.
- Trigger element
- Maximum length = 250px
Note: The blue outline is used to illustrate the trigger area. Remove it on actual UI.