VueTippy

Animations

Tooltips can have different types of transition animations.

Option Default Inputs Role
animation 'shift-away' 'shift-away' 'shift-toward' 'perspective' 'fade' 'scale' Specifies the type of transition animation a tooltip has.
animateFill true Boolean Adds a material design-esque filling animation. This is disabled if you have 'arrow' set to true.
duration [350, 300] Number | Array (milliseconds) Specifies how long the transition animation takes to complete. A single number will use the same duration for the show and hide events. Use an array to specify a different show and hide duration, such as [300, 100].
inertia false Boolean Modifies the transition-timing-function with a cubic bezier to create a 'slingshot' intertial effect.
<button content="I shifted away from my reference element!"
        v-tippy="{ arrow : true,  animation : 'shift-away'}">
    Shift Away
</button>
1
2
3
4
<button content="I shifted toward my reference element!" 
        v-tippy="{ arrow : true,  animation : 'shift-toward'}"
>
    Shift toward
</button>
1
2
3
4
5
<button content="I just faded into existence!" 
        v-tippy="{ arrow : true,  animation : 'fade'}"
>
    Fade
</button>
1
2
3
4
5
<button content="I rotated with perspective!" 
        v-tippy="{ arrow : true,  animation : 'perspective'}"
>
    Perspective
</button>
1
2
3
4
5
<button content="I scaled up from nothingness!" 
        v-tippy="{ arrow : true,  animation : 'scale'}"
>
    Scale
</button>
1
2
3
4
5
<button content="Slingshot" 
        v-tippy="{ inertia : true, arrow : true, duration : '[600,300]'}"
>
    Inertia (shift away)
</button>
1
2
3
4
5
<button content="Slingshot" 
        v-tippy="{ inertia : true, arrow : true,  animation : 'shift-toward', duration : '[600,300]'}"
>
    Inertia (shift toward)
</button>
1
2
3
4
5
<button content="Slingshot" 
        v-tippy="{ inertia : true, arrow : true,  animation : 'scale', duration : '[600,300]'}"
>
    Inertia (scale)
</button>
1
2
3
4
5
<button content="Slingshot" 
        v-tippy="{ inertia : true, arrow : true,  animation : 'perspective', duration : '[600,300]'}"
>
    Inertia (perspective)
</button>
1
2
3
4
5

← Composition API →