# tooltip

Components⚛ TSX Live preview

Elastic Following Tooltip

A gradient tooltip that springs toward the cursor position with lerp smoothing and an arrow caret.

5.9k31.8k6.7kOpen

Spring Tooltip Bubbles

Pure-CSS tooltips with data-attribute text, arrow and an overshoot pop, positioning top or bottom.

18700Open

Components Live preview

Frosted glass directional tooltips

Blurred glass tooltips with an arrow notch pop in above or below buttons on hover, spring easing.

28700Open

Spring Tooltip Button · Deep Indigo

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Deep Indigo palette.

53800Open

Spring Tooltip Button · Aurora Teal

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Aurora Teal palette.

35200Open

Spring Tooltip Button · Mono Pearl

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Mono Pearl palette.

10900Open

Spring Tooltip Button · Ultra Violet

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ultra Violet palette.

32500Open

Spring Tooltip Button · Cyber Lime

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Cyber Lime palette.

67400Open

Spring Tooltip Button · Sunset Amber

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Sunset Amber palette.

61700Open

Spring Tooltip Button · Rose Gold

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Rose Gold palette.

84100Open

Spring Tooltip Button · Ocean Sky

A subtle button that pops a spring-animated tooltip bubble into view on hover. Rendered in the Ocean Sky palette.

50900Open

Tooltip Bubble

Hover tooltip with fade/scale entrance and arrow pointer.

Arrow Tooltip Kit

Four directional tooltips appearing on hover with fade-scale entrance.

Info Icon Tooltip

Small info icon revealing a tooltip with rich content and arrow.

Copy Tooltip Feedback

Copy button whose tooltip morphs to a check with copied confirmation.

Image Hotspot Tooltip

Image with interactive hotspots opening tooltips at points.

Bordered Avatar Wall

Dense avatar wall with thin borders and tooltip names on hover.

Status Explanation Tooltip

Hovering a status dot explains its meaning in a rich tooltip.

Pronunciation Tooltip

Text word with speaker icon tooltip offering pronunciation audio.

Definition Term Tooltip

Underlined terms revealing dictionary-style tooltips with phonetic.