Ant Design Tooltip组件文字与背景颜色修改失败，overlayStyle无效求解决

我来帮你搞定这个问题！你遇到的两个痛点——样式不生效和hover状态下没法审查元素，我都有实用的解决办法：

一、先搞定「hover时Tooltip消失没法审查」的问题 #

要查看Tooltip hover状态下的DOM结构和样式，不用一直悬停着，Chrome DevTools有两个好用的小技巧：

• 冻结页面法：先把鼠标放在触发Tooltip的元素上，让Tooltip显示出来，立刻按下F8（或者在DevTools的Sources面板点击暂停按钮），页面会直接冻结，Tooltip就不会消失了，你可以从容在Elements面板里查看它的类和样式细节。
• 强制hover状态法：在Elements面板找到Tooltip的触发元素（比如你的<div>），右键选择「Force State」→「:hover」，强制让触发元素处于hover状态，Tooltip会一直显示在页面上。

二、为什么overlayStyle不生效？怎么修改颜色？ #

Ant Design的Tooltip浮层有多层DOM结构，overlayStyle是作用在最外层的容器上，但实际控制背景色的是内部的.ant-tooltip-inner类，文字颜色的样式也定义在这个类里。直接用overlayStyle没法覆盖内部的默认样式，你可以用下面两种方法解决：

方法1：使用overlayClassName自定义类名（推荐） #

先定义一个自定义CSS类，通过overlayClassName传递给Tooltip，精准覆盖内部样式：

/* 自定义Tooltip样式 */
.custom-tooltip .ant-tooltip-inner {
  background-color: blue;
  color: orange;
  /* 还可以按需修改其他样式，比如边框、圆角 */
  border-radius: 4px;
}

<Tooltip 
  title={jobNumber * 3} 
  placement="bottomRight" 
  overlayClassName="custom-tooltip"
>
  <div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>

方法2：内联样式结合深度选择器（适用于CSS Modules或styled-components） #

如果你用的是CSS Modules或者styled-components这类方案，可以用深度选择器穿透默认样式：

// 以styled-components为例
const StyledTooltip = styled(Tooltip)`
  .ant-tooltip-inner {
    background-color: blue;
    color: orange;
  }
`;

// 使用时
<StyledTooltip 
  title={jobNumber * 3} 
  placement="bottomRight"
>
  <div style={{ maxWidth: `${jobNumber * 3}px` }} />
</StyledTooltip>

如果是CSS Modules：

.custom-tooltip :deep(.ant-tooltip-inner) {
  background-color: blue;
  color: orange;
}

补充：为啥你原来的overlayStyle没效果？ #

你设置的overlayStyle是作用在Tooltip最外层的容器上，这个容器默认是透明的，背景色和文字颜色的样式都在内部的.ant-tooltip-inner元素里，所以你写的background和color根本没作用到正确的元素上，自然看不到效果~

内容的提问来源于stack exchange，提问作者Wasif