ant里面的Tooltip如何修改背景颜色
2021-03-30 本文已影响0人
菲儿_cdd4
ant Tooltip如何修改气泡的样式?官方没有提供修改方式,也在网上查了半天,把网上的大部分方法都试了一下,也还是不起作用。最后用Popover来代替Tooltip实现了所需功能。挤出一点时间研究了一下最终实现了,现在把实现的方法和大家分享一下
效果图:

html部分:
<a-tooltip overlayClassName="draw_atooltip">
<template slot="title">
prompt text
</template>
<a-button style="margin-left:100px;">changeTooltipBackground</a-button>
</a-tooltip>
css部分:
<style>
//控制主体颜色
.draw_atooltip .ant-tooltip-inner {
color: #333 !important;
background-color: #fff !important;
}
//控制三角形颜色
.draw_atooltip .ant-tooltip-arrow::before {
background-color: #fff;
}
</style>
注意事项:style 不要加scoped 锁死样式的话 不起作用