Vuetify VTooltip trigger only on activator click

4
votes

I wanted to trigger Vuetify tooltip VTooltip only when the activator is clicked rather than hovered. I tried to bind it with a variable but still triggered on hover.

 methods: { 

  doCopy(){
     // copy logic
     this.showCopied = true;
     setTimeout(() => {
        this.showCopied = false
      }, 1000)

  }
 }



 <VTooltip v-model="showCopied">
    <template #activator="{ on }">
      <VBtn  v-on="on" @click="doCopy"> COPY </VBtn>
    </template>
 </VTooltip>
2
vue.jsvuejs2vuetify.js

2 Answers

6
votes

This is actually more complicated than I expected thanks to some bugs. You should be able to just do <v-tooltip :open-on-hover="false">, but a focus listener is still added which causes the click to close the tooltip immediately. Instead you need to bind the click and blur events separately, and add retain-focus-on-click to the button so it doesn't blur immediately.

Full solution: 

<v-tooltip bottom :open-on-hover="false">
  <template #activator="{ on }">
    <v-btn @click="on.click" @blur="on.blur" retain-focus-on-click>Copy</v-btn>
  </template>
  <span>Copy</span>
</v-tooltip>
3
votes

It turns out I have to disable the default event handler of the activator. Simply removing default event object (on) binding solves the issue.


<VTooltip v-model="showCopied">
    <template #activator={}>
      <VBtn  @click="doCopy"> COPY </VBtn>
    </template>
 </VTooltip>

[UPDATED] based on @Kael Watts-Deuchar answer NB: the v-model biding is mandatory