嘿，我来帮你搞定这个tooltip换行没生效的问题～你用
没效果，主要是因为不同场景下对换行的解析规则不一样，下面分几种常见情况给你对应的解决方案：

1. 原生HTML/JS的原生title tooltip #

如果是给普通DOM元素的title属性设置tooltip，浏览器不会解析HTML实体，得用JavaScript的换行符\n（或者\r\n，效果差不多）。

示例代码：

// 用字符串拼接
const tooltip = "User is already present.\n" + props.email;
// 更推荐用模板字符串，写起来更直观
const tooltip = `User is already present.
${props.email}`;

// 赋值给元素的title属性
document.getElementById("your-element").title = tooltip;

2. React/Vue等框架的自定义Tooltip组件 #

如果是用UI库（比如Material-UI、Ant Design）的Tooltip组件，大部分支持直接传入HTML元素或者框架节点来实现换行，不用折腾字符串：

React示例（以Material-UI为例） #

import Tooltip from '@mui/material/Tooltip';

// 方式1：直接用React元素和<br>标签（安全且直观）
<Tooltip title={
  <div>
    User is already present.
    <br />
    {props.email}
  </div>
}>
  <button>Hover me</button>
</Tooltip>

// 方式2：如果一定要用字符串，用dangerouslySetInnerHTML（注意XSS风险）
const tooltipHtml = `User is already present.<br>${props.email}`;
<Tooltip title={<div dangerouslySetInnerHTML={{ __html: tooltipHtml }} />}>
  <button>Hover me</button>
</Tooltip>

3. CSS伪元素实现的Tooltip #

如果是用CSS的:before/:after伪元素做tooltip，需要用CSS的换行符\A，同时配合white-space: pre-wrap样式让换行生效：

.tooltip-target:before {
  content: "User is already present.\A" attr(data-email);
  white-space: pre-wrap; /* 关键：让换行符生效 */
  /* 其他tooltip样式：背景、内边距、定位等 */
  background: #333;
  color: white;
  padding: 8px;
  position: absolute;
  top: -40px;
}

然后JS里给元素设置data-email属性：

document.querySelector(".tooltip-target").dataset.email = props.email;

为什么你的
没效果？ #


是HTML实体的回车符，但它只有在浏览器解析HTML内容的时候才会被转换成换行。而你直接把它拼接到字符串里，它只是普通的文本字符，不会被解析成换行——除非你把这个字符串作为HTML内容插入到DOM中（比如用innerHTML），但原生title属性和大部分Tooltip组件的字符串模式都不会解析HTML实体哦～

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