Transitions and Delays

Tooltips can have different transition durations or delays.

Option	Default	Inputs	Role
delay	0	Number \| Array (milliseconds)	Specifies how long it takes after a show or hide event is fired for a tooltip to begin showing or hiding. Use an array to specify a different show and hide delay, such as [300, 100].
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].

<button title="BAM!"
        v-tippy="{ arrow : true,  animation : 'fade', duration : 0}">
    Instant
</button>

1
2
3
4

<button title="Fast!"
        v-tippy="{ arrow : true,  animation : 'fade', duration : 200}">
    Short duration
</button>

1
2
3
4

<button title="Slooooow"
        v-tippy="{ arrow : true,  animation : 'fade', duration : 1000}">
    Long duration
</button>

1
2
3
4

<button title="Waited to show"
        v-tippy="{ arrow : true,  animation : 'fade', delay : [600,0]}">
    Show delay
</button>

1
2
3
4

<button title="Waited to hide"
        v-tippy="{ arrow : true,  animation : 'fade', delay : [0,600]}">
    Hide delay
</button>

1
2
3
4

<button title="Waited for both"
        v-tippy="{ arrow : true,  animation : 'fade', delay : [600,600]}">
    Combined delay
</button>

1
2
3
4

# Transitions and Delays