Tooltip Component
Capsule-shaped tooltips with thin ink borders and subtle animations.
Basic Tooltip
Hover over the buttons to see capsule-shaped tooltips.
Tooltip Variants
Default
Accent
Outline
Three variants available: default (dark background), accent (theme color), and outline (light with border).
Tooltip Positions
Animated Tooltips (framer-motion)
Scale Animation
Slide Animation
Rotate Animation
Bounce Animation (Spring)
Flip Animation (3D)
Custom tooltip animations using framer-motion for different enter/exit effects.
Staggered Content Animation
Tooltip content items animate in sequence for a polished reveal effect.
Different Trigger Elements
Inline Text Tooltips
The Orbit Capsule design system emphasizes modular independence where every component floats independently. The signature orbit hover effect adds depth and interactivity to the interface.
Icon Tooltips
Small help icons are perfect for contextual information without cluttering the interface.
Delay Duration
Control how long users must hover before the tooltip appears. Longer delays prevent accidental triggers.
Keyboard Shortcut Hints
Tooltips are great for displaying keyboard shortcuts alongside action descriptions.