如何修改Vuetify中v-tooltip的文本颜色而非背景色？

第一步：解决tooltip无法审查的问题 #

要查看悬浮才显示的tooltip元素，有两个实用方法：

• 给v-tooltip添加persistent属性，让tooltip始终显示，调试完成后再移除该属性：

<v-tooltip 
  persistent
  nudge-bottom="610"
  nudge-left="88"
  open-delay="500"
  color=#696969
>

• 或者打开浏览器调试工具的「Sources」面板，点击暂停脚本执行按钮（⏸️），再用鼠标悬浮触发tooltip，此时页面脚本暂停，tooltip不会消失，即可正常审查元素。

第二步：修改tooltip文本颜色 #

Vuetify确实没有提供直接设置tooltip文本颜色的属性，需通过自定义CSS实现，分两种场景：

场景1：全局修改所有tooltip

在全局样式文件（比如App.vue的<style>区块或独立CSS文件）中添加规则：

.v-tooltip__content {
  color: #ffffff; /* 替换为你需要的文本颜色值 */
}

场景2：仅修改单个tooltip

给目标v-tooltip添加自定义class：

<v-tooltip 
  class="custom-tooltip"
  nudge-bottom="610"
  nudge-left="88"
  open-delay="500"
  color="#696969"
>

然后在样式中针对该class编写规则：

.custom-tooltip .v-tooltip__content {
  color: #ffffff; /* 自定义文本颜色 */
}

结合你的代码修改后的完整示例 #

<div v-if="nbFiltersActive !=0">
  <v-btn 
    v-if="toggleSettingsBtn == true"
    fab
    class="active-filters-alert"
    color="red"
    tile
    dark
    @click.stop="drawerSettings = true"
  >
    <v-tooltip 
      class="custom-tooltip"
      nudge-bottom="610"
      nudge-left="88"
      open-delay="500"
      color="#696969"
    >
      <template #activator="{ on }">
        <span v-on="on" :color="textLightGrey">{{nbFiltersActive}}</span>
      </template>
      <span>You have filters applied</span>
    </v-tooltip>
  </v-btn>
</div>

对应样式：

.custom-tooltip .v-tooltip__content {
  color: #fff; /* 替换为你需要的颜色 */
}

内容的提问来源于stack exchange，提问作者Quentin