如何让Ant Design Tooltip宽度与标题长度匹配？

要让Tooltip宽度自适应标题长度且保持响应式，核心是覆盖antd Tooltip的默认样式限制，以下是几种可行方案：

方案1：全局/局部CSS覆盖默认样式 #

antd Tooltip的弹出层（.ant-tooltip-inner）默认设置了min-width和自动换行规则，导致宽度不稳定。通过CSS修改这些属性即可解决：

全局生效（适合全项目统一调整） #

.ant-tooltip-inner {
  /* 移除最小宽度限制 */
  min-width: unset;
  /* 强制内容不换行，宽度跟随标题长度 */
  white-space: nowrap;
  /* 可选：调整内边距让样式更紧凑 */
  padding: 4px 8px;
}

局部生效（仅针对特定Tooltip） #

先给目标Tooltip添加自定义类名：

<Tooltip 
  placement="top" 
  align={{ offset: [0, 10] }} 
  title='this is the title'
  className="custom-tooltip"
>
  <span>tooltip</span>
</Tooltip>

再编写针对性CSS：

.custom-tooltip .ant-tooltip-inner {
  min-width: auto;
  white-space: nowrap;
}

方案2：自定义标题元素（无需全局样式） #

直接给Tooltip的title传入带内联样式的React元素，局部控制内容换行行为：

<Tooltip 
  placement="top" 
  align={{ offset: [0, 10] }} 
  title={<span style={{ whiteSpace: 'nowrap' }}>this is the title</span>}
>
  <span>tooltip</span>
</Tooltip>

处理长标题场景 #

如果标题内容过长，不想Tooltip撑满屏幕，可以添加max-width限制，超过时自动换行，兼顾响应式：

.custom-tooltip .ant-tooltip-inner {
  min-width: auto;
  max-width: 90vw; /* 最多占视口90%宽度 */
  white-space: normal; /* 超过max-width时自动换行 */
}

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