How to make v-tooltip close when I click anywhere else on screen

Question

I'm using vuetify 3 and there is no option on the v-tooltip to close when the user clicks away. Here is my code:

<div class="button-wrapper">
 <v-btn> Open tooltip </v-btn>
 <v-tooltip
  :open-on-click="true"
  :open-on-hover="false"
  activator="parent"
  location="top"
 >
  This is my tool tip message
 </v-tooltip>
</div>

I want to click the button to activate the tooltip and then be able to click anywhere and have the tooltip close. Currently it opens on the button click but stays persistent unless I click the button again.

score 0 · Answer 1 · answered Jul 26 '23 at 08:17

There is no prop for that, but you can easily write it yourself using the @click:outside event from the underlying VOverlay. With this, you can update the tooltip's state through modelValue/v-model:

    <v-tooltip
      v-model="showTooltip"
      @click:outside="showTooltip = false"
      ...
    >

How to make v-tooltip close when I click anywhere else on screen

1 Answers1