Tooltip Patterns
Accessible tooltips, popovers, hover cards, and keyboard shortcut hints using Radix UI primitives.
What's Included#
- Basic tooltip component with configurable side and delay
- Simple tooltip wrapper for quick inline usage
- Popover component for interactive content triggered by click
- Hover card for user previews and rich content on hover
- Keyboard shortcut tooltip with styled key indicators
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the tooltips pattern from Bootspring"
- "Apply the Bootspring tooltips pattern to my project"
Key Considerations#
- Use tooltips only for supplementary information, not essential content
- Keep tooltip content brief and scannable at a glance
- Set appropriate hover delays (200-400ms) to prevent accidental triggers
- Use popovers instead of tooltips when content requires user interaction
- Tooltips do not work well on touch devices; consider alternative patterns for mobile
Related Patterns#
- Dropdowns - Dropdown menu patterns
- Modals - Modal dialog patterns
- Navigation - Navigation component patterns