> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/tooltip.md).
# 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.
{% embed url="" %}
## 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.
