# Tooltip


### Default Variant Anatomy

- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
- **Body Text:** Additional text content providing detailed information or instructions.
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.

### Share Variant Anatomy

- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
- **Body:** Additional content providing information or instructions.
- **Share Icon Buttons:** Icon buttons allowing users to perform sharing actions.
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.

## How to Use

### Web
Associate tooltips with relevant elements or UI components using appropriate trigger mechanisms (e.g., hover, click).


### App
- Utilize tooltips primarily for providing helpful hints or guidance, avoiding excessive use that may clutter the interface.


## Dos

- **Provide Clear and Concise Content:** Ensure tooltip content is brief, relevant, and easy to understand.
- **Use Appropriate Trigger Mechanisms:** Choose trigger mechanisms (e.g., hover, click) that align with user expectations and interaction patterns.

## Don'ts

- **Avoid Cluttering the Interface:** Refrain from overloading the interface with excessive tooltips, which may overwhelm users and hinder usability.
- **Don't Hide Essential Information:** Avoid using tooltips as a substitute for essential information or instructions that should be visible without interaction.