Tooltip

Tooltip component provides additional information when a user hovers over, focuses on, or taps an element.

Examples

It’s possible to change colour according to the background

Place the tooltip with the notch (up, bottom, left, right) in a way that to do not cover other interactive UI elements.

To offer brief, supplementary information or clarification about an element without cluttering the UI.
When you need to explain icons, abbreviations, or truncated text.
To provide helpful hints or tool descriptions in form fields, buttons, or interactive elements.
When the additional information is non-essential and the interface should remain clean and uncluttered.

For critical information that the user must see to complete a task; this should be visible by default.
When the information is lengthy; consider using a modal or a popover instead.
If the content within the tooltip needs to be interacted with, such as links or buttons.
For mobile users as tooltips can be difficult to trigger and view on touch devices.

MODAL: Use for essential, detailed information or when interaction within the content is required.
POPOVER: Ideal for displaying additional content that requires interaction or is too lengthy for a tooltip.
HELP TEXT: Use for static, always-visible instructions or explanations near the related element

Ensure the tooltip is accessible via keyboard by using focus events to trigger the tooltip.
Provide ARIA attributes like aria-describedby to link the tooltip to the element it describes.
Ensure the tooltip remains visible while the user navigates through its content using a keyboard.
Provide a way to dismiss the tooltip using a keyboard (e.g., pressing the Esc key).
Make sure tooltips are dismissible on both hover out and focus out events.
Use sufficient contrast and readable font sizes to ensure the tooltip content is easily legible.