修改 Ant Design Vue a-tooltip 组件默认样式

先用 overlayClassName 属性声明一个 class<a-tooltip placement="top" overlayClassName="bgc_tooltip"><template slot="title"><span>prompt text</span></template><a-but

June·D

10296人浏览 · 2021-05-18 14:05:23

June·D · 2021-05-18 14:05:23 发布

先用 overlayClassName 属性声明一个 class

<a-tooltip placement="top" overlayClassName="bgc_tooltip">
  <template slot="title">
    <span>top</span>
  </template>
  <a-button>Top</a-button>
</a-tooltip>

然后覆盖样式就行了，如果不知道相应类名，可以将 trigger 属性设置为 click，然后在网页检查元素找到类名

<style lang="less">
// 注意，vue 项目，style 标签不能加 scoped 选项，否则样式不生效
.bgc_tooltip {
    .ant-tooltip-inner {
      // 这里是框框
      color: #333;
      background-color: #fff!important;
    }
    .ant-tooltip-arrow::before {
      // 这里是小三角形
      background-color: #fff!important;
    }
}
</style>