Triggers

Triggers define the types of events that cause a tooltip to show. A fourth trigger, Manual, is used when you want to programmatically show or hide a tooltip.

Option	Default	Inputs	Role
trigger	'mouseenter focus'	'mouseenter' 'focus' 'click' 'manual' {custom}	Specifies which type of events will trigger a tooltip to show. Separate each by a space. mouseenter is for hovering and touch on mobile, and focus is for keyboard navigation. Use manual if you want to show/hide the tooltip manually (see the Methods section below). {custom} refers to the fact that you can have any event listener, but it won't have the opposite "hide" event.

<button content="Some mobile browsers only fire mouseenter" 
        v-tippy='{ trigger : "mouseenter" }'>
    Hover or touch
</button>

1
2
3
4

<button content="Some mobile browsers only fire focus" 
        v-tippy='{ trigger : "focus", hideOnClick : false }'>
    Focus or touch
</button>

1
2
3
4

<button content="Thanks for clicking" v-tippy='{ trigger : "click"}'>
    Click
</button>

1
2
3

← Arrows Interactivity →

# Triggers

Triggers