时间戳

首页 > 解决方案 > Vuetify：v-card 填满整个 v-tooltip

vue.js - Vuetify：v-card 填满整个 v-tooltip

问题描述

我正在创建一个在单击或悬停图标时出现的工具提示；我在工具提示中使用了一个 v-card：

            <v-tooltip bottom min-width="15%">
              <template v-slot:activator="{ on, attrs }">
                <v-icon small
                  v-bind="attrs"
                  v-on="on">
                  mdi-information
                </v-icon>
              </template>

              <v-card flat height="100%" width="100%" class="ma-0 pa-0">
                <v-card-text>
                  Tooltip Text is here
                </v-card-text>
              </v-card>
            </v-tooltip>

v-card 不会完全填充工具提示。如何让 v-card 填满整个工具提示？

标签： vue.jsvuetify.js

解决方案

您可以轻松填写​​整个工具提示，因为我提到这里没有使用卡片，它是在工作表上制作的，可以在 span 内填充 span 标签无论您想写什么，都可以...

  

    <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
            <v-icon color="primary"
              dark
              v-bind="attrs"
              v-on="on" left>
            mdi-information
          </v-icon>
          </template>
          <span>Bottom tooltip</span>
    </v-tooltip>

推荐阅读