You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vuetify中修改v-tooltip背景色应使用哪个prop属性

Vuetify v-tooltip 背景色自定义方案

修改v-tooltip的背景色不需要写额外自定义CSS,直接使用组件内置的color prop即可。
你需要设置的#E5E5E5色值可以直接传给该prop,参考示例:

<template>
  <v-tooltip color="#E5E5E5" text="自定义背景的提示文本">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props">悬停触发提示</v-btn>
    </template>
  </v-tooltip>
</template>

注意:#E5E5E5是浅灰色,v-tooltip默认文字为白色,在浅背景上可读性较差,可以搭配text-color prop设置深色文字,比如text-color="#212121"即可显示深灰色文字。

color prop支持三类传值:

  • 自定义色值:包括十六进制、RGB/RGBA、HSL/HSLA格式的合法CSS色值
  • Vuetify主题内置色名:比如primary、secondary、grey-lighten-4等预设色
  • 自定义主题扩展色名:如果你在项目主题里扩展了自定义色,也可以直接传入对应色名

内容的提问来源于stack exchange,提问作者Maninder Kaur

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.31 13:03:29