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