如何在Vaadin Flow提示框（Tooltip）中实现换行？

针对Vaadin 23中Tooltip的换行需求，目前官方文档无明确指引，现有公开讨论也未给出有效方案，以下是两种经验证可行的实现方式：

方案一：HTML标签换行（支持富文本） #

通过开启Tooltip的HTML内容解析权限，使用<br>标签实现换行：

Tooltip tooltip = new Tooltip();
// 允许解析HTML内容
tooltip.setHtmlContentAllowed(true);
// 用<br>分隔多行文本
tooltip.setText("第一行提示内容<br>第二行提示内容<br>第三行提示内容");

// 将Tooltip绑定到目标组件（示例为Button）
Button targetBtn = new Button("悬停查看多行提示");
tooltip.setTarget(targetBtn);

方案二：纯文本+CSS换行（适合纯文本场景） #

如果仅需纯文本换行，可使用换行符\n配合自定义CSS实现：

1. Java代码设置带换行符的文本并添加样式类：

Tooltip tooltip = new Tooltip();
// 用\n分隔多行文本
tooltip.setText("第一行提示内容\n第二行提示内容\n第三行提示内容");
// 添加自定义样式类
tooltip.addClassName("multi-line-tooltip");

Button targetBtn = new Button("悬停查看多行提示");
tooltip.setTarget(targetBtn);

2. 在全局样式文件（如styles.css）中添加CSS规则：

/* 针对Tooltip的内容区域设置换行规则 */
.multi-line-tooltip [part="content"] {
    white-space: pre-line;
}

注意事项 #

• 方案一中开启HTML内容解析需注意XSS风险，若提示内容包含用户输入，需做好内容过滤。
• 方案二中的CSS需作用到Tooltip的content部分，因Vaadin组件基于Shadow DOM，需通过[part="content"]定位目标元素。

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