Vuetify —— 使用 v-tooltip组件

最新推荐文章于 2025-03-01 13:58:31 发布

贝塔贝卡贝

最新推荐文章于 2025-03-01 13:58:31 发布

阅读量2.9k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Kiruthika/article/details/122693293

版权

当用户悬停在元素上时， v-tooltip 组件可用于传递信息。您还可以通过 v-model 来控制提示的显示。当激活时，提示将显示用于标识元素的文本，例如其功能的描述。
在这里插入图片描述

<div v-for="link in linkSources" :key="link.id">
  <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
      <v-img
        style="cursor:pointer"
        v-bind="attrs"
        v-on="on"
        class="rounded mx-4 my-2"
        :src="require('@/assets/sources/' + link.type + '.png')"
        width="44"
        @click="goLink(link)"
      ></v-img>
    </template>
    <span>{{ link.name }}</span>
  </v-tooltip>
</div>