VueTippy

Callbacks (events)

Callbacks allow you to react to a tooltip's show and hide events. Open your browser console to see when the logs occur.

Option Default Inputs Role
@show - Function Callback function triggered when a tooltip begins to show.
@shown - Function Callback function triggered when a tooltip has fully transitioned in.
@hide - Function Callback function triggered when a tooltip begins to hide.
@hidden - Function Callback function triggered when a tooltip has fully transitioned out.
<button title="I'm called when a tooltip begins to show."
        @show="onShow"
        v-tippy="{ arrow : true, duration : 600 }">
    @show
</button>
1
2
3
4
5
<button title="I'm called when a tooltip begins to hide."
        @hide="onHide"
        v-tippy="{ arrow : true, duration : 600 }">
    @hide
</button>
1
2
3
4
5
<button title="I'm called when a tooltip begins to show."
        @show="onShow"
        v-tippy="{ arrow : true, duration : 600 }">
    @show
</button>
1
2
3
4
5
<button title="I'm called when a tooltip has fully transitioned in."
        @shown="onShown"
        v-tippy="{ arrow : true, duration : 600, maxWidth : '400px' }">
    @shown
</button>
1
2
3
4
5
<button title="I'm called when a tooltip has fully transitioned out."
        @hidden="onHidden"
        v-tippy="{ arrow : true, duration : 600, maxWidth : '400px' }">
    @hidden
</button>
1
2
3
4
5
6

← Component →