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