Vuetify：v-card 填满整个 v-tooltip答案

【问题标题】：Vuetify: v-card fills up entire v-tooltipVuetify：v-card 填满整个 v-tooltip
【发布时间】：2021-11-10 04:20:33
【问题描述】：

我正在创建一个在单击或悬停图标时出现的工具提示；我在工具提示中使用了 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.js vuetify.js

【解决方案1】：

最好使用带有 open-on-hover 属性的 <v-menu> 标签而不是 <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

【讨论】：

也将对此进行调查。谢谢。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：