Vuetify：v-card 填满了整个 v-tooltip

Question

我正在创建一个工具提示，它会在单击或悬停图标时出现；我在工具提示中使用 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 填满整个工具提示？

Answer 1

你可以很容易地填写你的整个工具提示，因为我提到这里没有使用卡片它是在 sheet 上制作的，可以在 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>

Answer 2

最好将 <v-menu> 标签与 open-on-hover 属性一起使用而不是 <v-tooltip>.

示例：

<v-menu
  open-on-hover
  offset-y
  :close-on-content-click="false"
>
  <template v-slot:activator="{ on, attrs }">
    <v-icon
      small
      v-bind="attrs"
      v-on="on">
      mdi-information
    </v-icon>
  </template>

  <v-card>
    ...your card data
  </v-card>
</v-menu>

Codepen working example

Answer 3

将其添加到 v-tooltip content-class="pa-0"。您需要覆盖 .v-tooltip__content 上的 padding: 5px 16px;。 Reference to Vuetify docs 关于为什么使用 content-class 而不是 class（独立元素，如 v-dialog 和 v-menu）。

Vuetify：v-card 填满了整个 v-tooltip

Vuetify: v-card fills up entire v-tooltip

vue.js

vuetify.js