Tooltips & Popovers

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Tooltips

Four options are available: top, right, bottom, and left aligned.

Tippy Tooltips

A highly customizable vanilla JS tooltip & popover library

Placement

The default tippy tooltip looks like this when given no options. It has a nifty backdrop filling animation!

Top Bottom Left Right Top-Start Top-End

Arrows

Arrows point toward the reference element.

Default Round Wide Skinny Small Large

Interactivity

Tooltips can be interactive, meaning they won't hide when you hover over or click on them.

Interactive (hover) Interactive (click)

Duration

A tippy can have different transition durations.

0ms 200ms 1000ms [500ms, 200ms]

Animations

Tooltips can have different types of animations.

Shift away Shift toward Fade Scale Perspective Inertia (shift-away) Inertia (shift-toward) Inertia (scale) Inertia (perspective)

Themes

A tippy can have any kind of theme you want! Creating a custom theme is a breeze.

Translucent Light Gradient

Misc

Tippy has a ton of features, and it's constantly improving.

Follow cursor Touch & Hold Distance Offset Small Large