Vuetify - Show tooltip on click

Question

I have button that trigger a tooltip when my user clicked Copy

<v-btn @click="showCopiedText = !showCopiedText; copyHtmlText()">Copy</v-btn>

<v-tooltip v-model="showCopiedText" right>
    <span>Copied!</span>
</v-tooltip>

It works but my tool tip kept showing the tip left of my windows instead of next to my button.

Answer 1

Here is working demo. Try this:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      isShowTooltip: false
    }
  },
  methods:{
    hideToolTip(){
      setTimeout(()=>this.isShowTooltip = false, 2000);
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="4" sm="6" class="pl-0">
          <v-tooltip
            v-model="isShowTooltip"
            open-on-click
            :open-on-hover="false"
            close-delay='3000'
            right
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                large outlined color="indigo"
                v-bind="attrs"
                v-on="on"
                @click="hideToolTip"
              >
              Copy
              </v-btn>
            </template>
            <span>Copied</span>
          </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

Answer 2

The v-btn should be inside the v-tooltip's activator slot, so that the component can position itself around the contents:

1. Move the v-btn into the v-tooltip's activator slot.

2. In the v-btn's click-handler, use the slot's on property to simulate a mouseenter to show the tooltip; and mouseleave after a timeout to hide it. Make sure to clear the timeout in beforeDestroy in case the component is unmounted before the timeout.

<v-tooltip bottom>
  <template v-slot:activator="{ on, attrs }">
    1️⃣
    <v-btn v-bind="attrs" @click="toClick(on, $event)">Copy</v-btn>
  </template>
  <span>Copied</span>
</v-tooltip>

export default {
  beforeDestroy() {
    clearTimeout(this._timerId)
  },
  methods: {
    2️⃣
    toClick({ mouseenter, mouseleave }, e) {
      clearTimeout(this._timerId)
      mouseenter(e)
      this._timerId = setTimeout(() => mouseleave(e), 1000)
    }
  }
}

demo 1

Alternatively, you can use a v-model on the v-tooltip to show/hide the tooltip instead of the mouseenter/mouseleave simulations:

1. Declare a show Boolean prop, and use the prop as the v-tooltip's v-model.

2. In the v-btn's click-handler, set the prop to true, and use a timeout to reset it to false. Make sure to clear the timeout in beforeDestroy in case the component is unmounted before the timeout.

<v-tooltip bottom v-model="show"> 1️⃣
  <template v-slot:activator="{ attrs }">
    <v-btn v-bind="attrs" @click="showTooltip">Copy</v-btn>
  </template>
  <span>Copied</span>
</v-tooltip>

export default {
  data() {
    return {
      show: false, 1️⃣
    }
  },
  beforeDestroy() {
    clearTimeout(this._timerId)
  },
  methods: {
    showTooltip() {
      2️⃣
      this.show = true;
      this._timerId = setTimeout(() => this.show = false, 1000)
    }
  }
}

demo 2

Answer 3

From VueJS docs a tooltip still needs to be positioned. In this example the tooltip is inside a vueJS grid and is positioned correctly. Hopefully it helps.