Vuetify 如何让v-card组件完全填充满整个v-tooltip提示框

核心修改点 #

• 给<v-tooltip>组件添加content-class="p-0"属性，清除tooltip内容容器的默认内置内边距，这是v-card无法占满整个tooltip区域的核心原因
• 保持原有v-card的宽高100%、ma-0 pa-0配置即可生效

修改后完整代码 #

<v-tooltip bottom min-width="15%" content-class="p-0">
  <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>

兼容特殊场景 #

如果项目存在全局自定义样式覆盖了Vuetify默认spacing类的情况，可自定义内容类强制清除内边距：

1. 给v-tooltip设置content-class="tooltip-no-padding"
2. 添加对应样式：

.tooltip-no-padding {
  padding: 0 !important;
}

内容的提问来源于stack exchange，提问作者Zhe Sheng Lim