Vaadin 23中如何实现列表项hover时显示提示信息

解决方案概述 #

由于ListItem未实现HasToolTip接口，我们可以通过LitRenderer直接渲染带Tooltip的列表项元素，既保留原有布局结构，又实现鼠标悬停显示标签描述的功能。以下是修改后的完整实现：

完整代码实现 #

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.component.listbox.LitRenderer;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import java.util.Set;
import java.util.stream.Collectors;

public class TitleRenderer extends ComponentRenderer<Component, Book> {

    // 定义带Tooltip的标签渲染器
    private final LitRenderer<Tag> tagRenderer = LitRenderer.<Tag>of(
        // 原生title属性实现基础tooltip，如需定制样式可替换为vaadin-tooltip组件
        "<vaadin-list-item class='tag' title='${item.description}'>${item.name}</vaadin-list-item>"
    ).withProperty("name", Tag::getTagName)
     .withProperty("description", Tag::getTagDescription);

    @Override
    public Component createComponent(Book book) {
        VerticalLayout layout = new VerticalLayout(createTitleLinkComponent(book));
        layout.getStyle().set("background-color", book.getHighlight());
        
        Set<Tag> tags = book.getTags();
        if (tags != null && !tags.isEmpty()) {
            // 用LitRenderer生成带Tooltip的标签组件
            var tagComponents = tags.stream()
                .map(tagRenderer::createComponent)
                .collect(Collectors.toList());
            
            UnorderedList tagList = new UnorderedList(tagComponents.toArray(new Component[0]));
            tagList.getStyle().set("list-style-type", "none");
            
            layout.add(tagList); // 修正原代码：将列表整体添加到布局，而非单独添加列表项
        }
        
        layout.setMinWidth("55%");
        return layout;
    }

    // 原有的标题链接组件实现（示例）
    private Component createTitleLinkComponent(Book book) {
        return new Anchor("/books/" + book.getId(), book.getTitle());
    }
}

定制化Tooltip（可选） #

如果需要更美观的自定义Tooltip样式，可替换LitRenderer的模板为Vaadin官方的vaadin-tooltip组件：

private final LitRenderer<Tag> tagRenderer = LitRenderer.<Tag>of(
    "<vaadin-list-item class='tag'>" +
        "${item.name}" +
        "<vaadin-tooltip slot='tooltip' position='top'>${item.description}</vaadin-tooltip>" +
    "</vaadin-list-item>"
).withProperty("name", Tag::getTagName)
 .withProperty("description", Tag::getTagDescription);

使用此方式需确保项目中已引入Vaadin Tooltip依赖（Vaadin 24+默认包含）。

关键修正说明 #

• 修复原代码逻辑错误：原代码创建了UnorderedList但未将其添加到布局，改为将列表整体加入布局，保证标签结构的正确性。
• 通过LitRenderer直接绑定标签数据到HTML模板，无需手动创建ListItem，同时自然集成Tooltip功能。

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