Tooltip
Informative popups with hard-edge styling. Tooltips appear as small cards with crisp borders and solid shadows, providing contextual information like labels on a filing system.
Basic Tooltip
Tooltip Positions
Animation Variations
Different enter/exit animations for various visual effects
Display Timing
Control how quickly tooltips appear with different delay durations
With Different Content
Multi-line Content
Combined Animation & Timing
Mix different animations with custom delays for the perfect feel
Toolbar Example
With Keyboard Shortcuts
On Text Elements
Hard-Edge Stack uses a neo-brutalist design approach with zero blur shadows and high contrast elements inspired by vintage index cards.
On Disabled Elements
Note: Disabled buttons need to be wrapped in a span for tooltip to work