如何在Tooltip组件的title属性中实现换行？

你遇到的问题是因为不同UI组件库对Tooltip的title属性处理逻辑不一样，下面分几种常见情况给出解决办法：

1. 使用React元素作为Title（适用于Material-UI、Ant Design等主流库） #

大部分现代UI组件库的Tooltip都支持将title设置为React节点，而非纯字符串，这样就能直接用<br />实现换行：

// Material-UI示例
<Tooltip title={<div>Line 1<br />Line 2</div>}>
  {/* 你的元素 */}
</Tooltip>

// Ant Design示例
<Tooltip title={<div>Line 1<br />Line 2</div>}>
  {/* 你的元素 */}
</Tooltip>

这种方式最直接，组件会正常解析HTML标签，自然实现换行效果。

2. 配合CSS样式+换行符\n #

如果更倾向于用字符串形式的title，可以给Tooltip的弹出层添加CSS样式，让它识别换行符：

• 先给Tooltip设置自定义类名（比如custom-tooltip）
• 添加对应的CSS样式：

.custom-tooltip .tooltip-content {
  white-space: pre-wrap; /* 保留换行符，同时支持自动折行 */
  /* 若要强制严格保留换行格式，可改用 white-space: pre; */
}

• 最后在title属性里用\n分隔内容：

<Tooltip title="Line 1\nLine 2" className="custom-tooltip">
  {/* 你的元素 */}
</Tooltip>

注意不同组件库的弹出层类名可能不同，需要根据实际DOM结构调整CSS选择器。

为什么你之前的方法没生效？ #

• 直接在字符串里加<br />：如果组件把title当作纯文本渲染，<br />会被当成普通字符串显示，不会解析成换行标签；
• 用\n或
：默认情况下浏览器会把这些换行符转换成空格，只有设置了white-space相关样式，才会保留换行效果。

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