v-tooltip - 为什么 v-tooltip 会导致内容消失？

Question

我正在使用 Vuetify 在 Vue 应用程序中工作。我正在尝试在 v-list-tile-avatar 元素周围添加一个 v-tooltip，其中包含一个图像，如下所示：

              <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>

但这似乎使头像图像消失了。

在没有工具提示的情况下，我检查了头像元素，我看到了：

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

使用工具提示，我看到了这个：

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

这里发生了什么？

Answer 1

知道了！

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

^ 这有效。不确定在元素上包含带有 v-slot:activator="{ on }" 的模板和在元素上设置 v-on="on" 与不使用模板并将 slot="activator" 放在元素上之间有什么区别相反，但如果一个不起作用，请尝试另一个我猜。

Answer 2

您缺少 v-on="on" 激活器：

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

示例：https ://codepen.io/hans-felix/pen/XWJadQo