Tooltip
Tooltip
Tooltips display additional contextual information when users interact with elements. They provide supplementary details without cluttering the interface.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Min-width | 250px |
| Position | Fixed (relative to trigger) |
| Background | Dark (#323232) |
| Text Color | White |
| Corner Radius | 4px |
| Padding | 12-16px |
Animation
Section titled “Animation”| Property | Value |
|---|---|
| Fade In | Opacity 0 → 1 |
| Slide | +20px vertical movement |
| Duration | 200-300ms |
| Easing | Ease-out |
Variants
Section titled “Variants”Default position, appears above the trigger element
Used when space above is limited
For right-side elements
For left-side elements
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Provide contextual help for UI elements
- Display additional information without clutter
- Explain icon meanings or abbreviations
- Show field-level hints in forms
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Keep text concise (1-2 lines max) | Hide critical information only in tooltips |
| Use for supplementary information only | Use for long explanations |
| Position carefully to avoid overlap | Rely on tooltips for mobile users |
| Allow adequate hover target area | Obscure important UI elements |
Content Guidelines
Section titled “Content Guidelines”| Type | Example |
|---|---|
| Label explanation | ”Click to save your changes” |
| Icon meaning | ”Add new item” |
| Format hint | ”DD-MM-YYYY” |
| Keyboard shortcut | ”Ctrl + S” |