Tooltips Components
Display informative tooltips for additional information
Tooltip Variants
Default
Primary blue style with shadow
Dark
Dark style with border
Light
Subtle light style
Info
For information messages
Success
For success messages
Warning
For warning messages
Destructive
For error messages
Usage tip: Choose a variant that matches the nature of the information being presented. Default for most cases, info/success/warning/destructive for corresponding message types.
Tooltip Sizes
Small
Smallest text size
Default
Default text size
Medium
Medium text size
Large
Larger text size
Usage tip: Use appropriate size based on the importance of information and the context. Default works for most cases, but use larger sizes for more important information.
Tooltip Positions
Top
Appears above the element
Right
Appears to the right
Bottom
Appears below the element
Left
Appears to the left
Usage tip: Consider the page layout when choosing tooltip position. Avoid positions that would push tooltips off-screen.
Tooltip Arrows
With Arrow
Shows directional arrow
Without Arrow
No directional arrow
Usage tip: Arrows help users understand which element the tooltip belongs to. Only hide arrows when the connection is obvious.
Rich Content Tooltips
Card Style
Stats Card
Action Tooltip
Usage tip: Rich content tooltips are great for providing context and additional information without requiring navigation to a new page. Use them for educational content, quick stats, or preview information.
Common Use Cases
Help Text
Help text tooltip explains input requirements
Feature Explanation
New Feature
Use tooltips to provide context for new features
Action Clarification
Clarify icon button actions with tooltips
Usage tip: Use tooltips to provide additional context without cluttering the UI. They're particularly useful for icon-only buttons, form fields, and complex features.