CODEWITHSUNDEEP
vue.jsvuetify.js
Diogo Mendonça
Diogo Mendonça

Reputation: 913

Vuetify tooltip hover with link

Is it possible to have Vuetify's v-tooltip with a clickable link? At this point using the default code provided by documentation

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-icon
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >mdi-home</v-icon>
      </template>
      <a href="#">clickable link</a>
    </v-tooltip>

We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?

Upvotes: 2

Views: 6568

Answers (2)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37793

You have 2 problems to solve:

  1. Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...

  2. By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...

template

     <v-tooltip bottom close-delay="2000">
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
          >
            mdi-home
          </v-icon>
        </template>
        <a href="#">clickable link</a>
      </v-tooltip>

style

.v-tooltip__content {
  pointer-events: initial;
}

Demo

Upvotes: 4

iikkoo
iikkoo

Reputation: 2856

You can control visibility by using v-model on the tooltip.

The following is taken from vuetifys example on visibility:

<v-tooltip
   v-model="show"
   top
>
   <template v-slot:activator="{ on, attrs }">
      <v-btn
         icon
         v-bind="attrs"
         v-on="on"
      >
         <v-icon color="grey lighten-1">
            mdi-cart
         </v-icon>
      </v-btn>
   </template>
   <span>Programmatic tooltip</span>
</v-tooltip>

And then define show in data: show: false

https://vuetifyjs.com/en/components/tooltips/#visibility

Upvotes: 0

Related Questions