a-tooltip修改背景色样式

最新推荐文章于 2024-01-30 13:01:50 发布

搬砖虾

最新推荐文章于 2024-01-30 13:01:50 发布

阅读量880

点赞数 2

文章标签：前端 vue css

本文链接：https://blog.csdn.net/Betty_666/article/details/131064487

版权

1.修改a-tootip背景色样式，需要先给组件自己定义一个类名：overlayClassName="tooltipColor"

2.需要注意这里的组件在style中不能携带scoped，所以需要额外写一个<style lang="less"></style>,最后在style中写上所改背景色样式即可

 <div class="dataScreen-top-title">
          上中下游产业企业数量统计排名
         <!-- 上中下游计算规则 -->
         <a-tooltip overlayClassName="tooltipColor">
                <template slot="title">
                  <p>数据为上市公司企业数量</p>
                </template>
                <a-icon type="more" class="more_rg_icon" />
         </a-tooltip>
 </div>

<style lang="less">
.tooltipColor {
  .ant-tooltip-inner {
    // 这里是框框
    color: #333;
    background-color: #fff !important;
  }

  .ant-tooltip-arrow::before {
    // 这里是小三角
    background-color: #fff !important;
  }
    //如果上面不起作用可使用这个试试
  //.ant-tooltip-arrow-content {
  //  background-color: #fff !important;
 // }
}
</style>