Why does v-tooltip cause content to disappear?

Question

I'm working in a Vue application with Vuetify. I'm trying to add a v-tooltip around a v-list-tile-avatar element with an image in it like so:

              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-list-tile-avatar>
                      <img src="avatar.png">
                  </v-list-tile-avatar>
                </template>
                <span>Click to view.</span>
              </v-tooltip>

But this seems to make the avatar image disappear.

Without the tooltip, I inspect the avatar element and I see this:

<div class="v-list__tile__avatar">
  <div class="v-avatar">
    <img src="avatar.png">
  </div>
</div>

With the tooltip, I see this:

<span class="v-tooltip v-tooltip--bottom">
  <span></span>
</span>

What's going on here?

score 0 · Answer 1 · answered Dec 27 '19 at 17:18

0

you are missing v-on="on" activator:

 <img v-on="on" ... />

example: https://codepen.io/hans-felix/pen/XWJadQo

answered Dec 27 '19 at 17:18

Hans Felix Ramos

4,264
3
16
40

Thanks, but unfortunately that doesn't work. In your codepen, add a v-list-tile-avatar around the img. Also, adding v-on="on" to my img or the v-list-tile-avatar doesn't seem to work, and when I take out the v-list-tile-avatar and put v-on="on" on the img, it doesn't work. I get an error in the console: "Property or method "on" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property." It gives me a link but it's not helpful. – gib65 Dec 27 '19 at 18:52
Which vuetify version do you use? – Hans Felix Ramos Dec 27 '19 at 20:35

score 0 · Answer 2 · answered Dec 27 '19 at 19:03

Got it!

<v-tooltip bottom>
  <v-list-tile-avatar slot="activator">
    <img src="avatar.png">
  </v-list-tile-avatar>
  <span>Click to view.</span>
</v-tooltip>

^ This works. Not sure what the difference is between including a template with v-slot:activator="{ on }" and setting v-on="on" on the element, and not using a template and putting slot="activator" on the element instead, but if one doesn't work, try the other one I guess.

Why does v-tooltip cause content to disappear?

2 Answers2