Vaadin 23.3.2：如何在Tooltip组件中渲染HTML（换行/链接）？

Vaadin 23.3.2的Tooltip组件不再支持旧版的setDescription方法插入HTML，但可以通过以下两种方式实现需求：

方法1：直接设置HTML格式内容 #

使用Tooltip的setHtml()方法（Java）或html属性（TypeScript），直接写入带HTML标签的内容，用<br>实现换行，<a>标签添加链接。

Java示例： #

Icon icon = VaadinIcon.INFO_CIRCLE.create();
Tooltip tooltip = new Tooltip();
// 插入换行和链接的HTML内容
tooltip.setHtml("第一行提示文本<br>" +
                "第二行提示文本，<a href=\"https://example.com\" target=\"_blank\">点击跳转链接</a>");
icon.add(tooltip);

TypeScript示例： #

const icon = vaadinIcon('info-circle');
const tooltip = new Tooltip();
tooltip.html = '第一行提示文本<br>第二行提示文本，<a href="https://example.com" target="_blank">点击跳转链接</a>';
icon.appendChild(tooltip);

方法2：自定义组件作为Tooltip内容 #

如果需要更复杂的布局或动态内容，可以直接向Tooltip中添加Vaadin组件，这种方式比纯HTML更灵活。

Java示例： #

Icon icon = VaadinIcon.INFO_CIRCLE.create();
Tooltip tooltip = new Tooltip();

// 创建垂直布局承载多行内容
VerticalLayout tooltipContent = new VerticalLayout();
tooltipContent.add(new Text("第一行提示文本"));

// 创建可跳转的链接组件
Anchor link = new Anchor("https://example.com", "点击跳转链接");
link.setTarget("_blank");
tooltipContent.add(new Text("第二行提示文本，"), link);

// 将布局设置为Tooltip的内容
tooltip.setContent(tooltipContent);
icon.add(tooltip);

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