如何修改React示例实现多行Tooltip，超出指定宽度自动换行？

• 定位Tooltip的核心内容容器，修改其CSS样式，添加以下关键属性：

  .tooltip-content {
    width: 200px; /* 你需要的固定宽度 */
    white-space: normal; /* 取消默认的强制不换行设置 */
    overflow-wrap: break-word; /* 长单词自动拆分换行 */
    word-break: break-word; /* 兼容多浏览器的换行规则 */
  }
  

  原示例大概率默认设置了white-space: nowrap强制单行显示，这是你之前设置宽度后内容仍不换行的核心原因，取消该属性即可让内容自动适配宽度换行。

• 若Tooltip内容为纯文本，直接应用上述样式即可；若为JSX内容，确保内容块是块级元素（比如用<div>包裹，而非<span>这类行内元素），或给行内元素添加display: block样式。

• 验证效果：背景宽度已生效的前提下，添加white-space: normal后，内容会自动填充到指定宽度并换行，长单词也会被拆分适配宽度。

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