Vuetify VTooltip триггер только по щелчку активатора

Question

Я хотел вызвать всплывающую подсказку Vuetify VTooltip только тогда, когда активатор нажат, а не завис. Я пытался связать его с переменной, но все еще срабатывал при наведении.

 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>

Answer 1

Это на самом деле сложнее, чем я ожидал, благодаря некоторым ошибкам. Вы должны быть в состоянии просто сделать <v-tooltip :open-on-hover="false">, но слушатель фокуса все еще добавлен, что заставляет щелчок немедленно закрывать подсказку. Вместо этого вам нужно привязать события щелчка и размытия отдельно и добавить retain-focus-on-click к кнопке, чтобы она не размывалась сразу.

Полное решение:

<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>

Answer 2

Оказывается, я должен отключить обработчик событий по умолчанию активатора. Простое удаление объекта события по умолчанию (on) привязка решает проблему.

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

[ОБНОВЛЕНО] на основе ответа @Kael Watts-Deuchar NB : обязательное связывание v-модели