CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Mehari
Mehari

Reputation: 3247

Vuetify VTooltip trigger only on activator click

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>

Upvotes: 7

Views: 6925

Answers (3)

Luis_RH
Luis_RH

Reputation: 403

In vuetify 2.6.1 you can do it like this now

<v-tooltip
  open-on-click
  :open-on-hover="false"
>
  <template
    v-slot:activator="{ on }"
  >
    <v-btn
      v-on="on"
    >
      button with tooltip
    </v-btn>
  </template>
  <span>tooltip message</span>
</v-tooltip>

Upvotes: 1

Mehari
Mehari

Reputation: 3247

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

Upvotes: 4

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4481

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>

Upvotes: 12

Related Questions