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?

Answer 1

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.

Answer 2

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

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

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