Design 01 · Placements

Tooltips placed
exactly right.

Place tooltips on any side with start, center or end alignment, with an optional arrow.

Hover any button

Every button shows its tooltip in a different position.

Design 02 · Animations

Smooth entrance
animations

Shift away, shift toward, scale or perspective. Pick the motion that matches your brand.

Shift Away

Hover the button below to preview the shift away animation.

Shift Toward

Hover the button below to preview the shift toward animation.

Scale

Hover the button below to preview the scale animation.

Perspective

Hover the button below to preview the perspective animation.

Design 03 · Triggers

Hover, click or
follow the cursor.

Choose how each tooltip opens. Mix hover, click and cursor-following tooltips on the same page.

Hover trigger

The default. Tooltips appear when the pointer rests on an element.

Click trigger

Great for mobile. Click this card to toggle its tooltip.

Follow cursor

The tooltip glides along with the mouse as you move.