antdv里面的a-tooltip如何修改背景颜色

官方文档

 

 全部代码

<template>
  <div class="content">
    <a-tooltip v-html="format" overlayClassName="bgcolor">
      <template slot="title">
        <span v-html="format" class="sumz"> {{ format }}</span></template
      >
      {{ format }}
    </a-tooltip>
  </div>
</template>
<script>
export default {
  data() {
    return {
      format:
        '<p>多式联运发展迎来黄金十年。<span style="color: rgb(255, 153, 0);">作为推进运输结构调整、</span>加快现代综合交通运输体系建设、促进物流业降本增效的重要抓手， 多式联运已成为<span style="color: rgb(230, 0, 0);">市场均衡发展、港口物流企业发展转型的推进器。文景信息紧抓多式联运业务发展痛点，立足“协同与高效”理念，创新提出：建立多式联运枢纽中心、大服务中心、大数据中心实现客户服务互动平台化、业务协同智能高效化、物流跟踪监控实时化、供应链业务管理科学化，形成一个跨系统、多元异构、实时联动的多式联运共享集成服务平台</span>。</p>',
    };
  },
  methods: {},
};
</script>

<style>
.content {
  margin-top: 30px;
  width: 300px;
  overflow: hidden;
  display: -webkit-box; /*//将对象作为弹性伸缩盒子模型显示。*/
  -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
  -webkit-line-clamp: 3; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数*/
}
/* //控制内容主题颜色 */
.bgcolor .ant-tooltip-inner {
  color: #333 !important;
  background-color: #fff !important;
}
/* 控制最下面三角形颜色 */
.bgcolor .ant-tooltip-arrow::before {
  background-color: #fff;
}
</style>

主要实现功能是显示三行内容，超出显示省略号，鼠标经过给一个提示框

 

 注意事项：style 不要加scoped 锁死样式的话 不起作用