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
2
3
4
<button title="Fast!"
v-tippy="{ arrow : true, animation : 'fade', duration : 200}">
Short duration
</button>
1
2
3
4
2
3
4
<button title="Slooooow"
v-tippy="{ arrow : true, animation : 'fade', duration : 1000}">
Long duration
</button>
1
2
3
4
2
3
4
<button title="Waited to show"
v-tippy="{ arrow : true, animation : 'fade', delay : [600,0]}">
Show delay
</button>
1
2
3
4
2
3
4
<button title="Waited to hide"
v-tippy="{ arrow : true, animation : 'fade', delay : [0,600]}">
Hide delay
</button>
1
2
3
4
2
3
4
<button title="Waited for both"
v-tippy="{ arrow : true, animation : 'fade', delay : [600,600]}">
Combined delay
</button>
1
2
3
4
2
3
4
← Animations Themes →