Transitions

Choose from five built-in tooltip animations using the transition prop.

Transitions

Pass the transition prop to choose how the tooltip enters and leaves. Pick one from the selector below and start the tour to preview it.

Select a transition

Step 1

First target

Step 2

Second target

Step 3

Third target

Per-step transitions

Set transition on an individual step to override the tour-level prop for that step only. Steps without a transition fall back to the tour prop, then 'fade'.

Step 1

fade

Step 2

slide-up

Step 3

slide-down

Step 4

slide-left

Step 5

slide-right

Available transitions

fade
Defaultdefault
Opacity fade combined with a subtle scale. The default.
slide-up
Tooltip slides upward into view (enters from below).
slide-down
Tooltip slides downward into view (enters from above).
slide-left
Tooltip slides in from the right.
slide-right
Tooltip slides in from the left.

Usage

<VTour transition="slide-up" :steps="steps" />
Custom transitions
You can use any Vue <Transition> name by overriding the generated CSS classes. The pattern is nt-tooltip-{name}-enter-active, nt-tooltip-{name}-leave-active, etc.

Save to localStorage

Control how and when tour progress is persisted with the save-to-local-storage prop.