Tooltip
UI ComponentsA small informational popup that appears when hovering over or focusing on an element, providing additional context or explanation.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Tooltip coming soon.
How It Works in Apps/Websites
Tooltips are contextual helpers that appear on hover (desktop) or long-press (mobile). They contain brief text explaining what an element does or providing supplementary information. They appear after a small delay (300-500ms) and disappear when moving away. Usually positioned above the trigger element with an arrow pointing down.
How AI Interprets This Term
When you say 'tooltip', AI expects: a small dark/black rectangular popup with rounded corners, white text, appearing above the trigger element with a small triangular arrow pointing to the trigger. Text should be concise (1-2 lines). Subtle fade-in animation.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add a tooltip that shows 'Copy to clipboard' when hovering a copy icon
Design a tooltip component: dark gray background (#1f2937), white text, 8px rounded corners, small arrow pointing to trigger. Appears 300ms after hover, positions above element by default. Max width 200px.
Show a simple text tooltip vs a rich tooltip with title, description, and keyboard shortcut
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Icon-only buttons
- •Truncated text
- •Explaining features
- •Showing keyboard shortcuts
When NOT to Use
- •Critical information users must see
- •Touch-only interfaces
- •Long content (use popover)
- •Interactive content (use popover)
Related Terms
Icon Button
A button that displays only an icon without visible text, used for common actions where the icon meaning is universally understood.
Popover
A floating container that appears near a trigger element, displaying additional content, actions, or forms without leaving the current context.