如何为Vaadin Lit模板中Grid内的元素添加Tooltip提示框

方法1：使用Vaadin Tooltip组件（推荐） #

Vaadin的<vaadin-tooltip>组件支持延迟显示、自定义定位等进阶功能，可直接在Lit模板中包裹图标元素实现提示效果：

静态提示文本 #

grid.addColumn(LitRenderer.<YourEntity>of("""
    <vaadin-tooltip text="这是我的图标提示" slot="tooltip">
        <vaadin-icon icon='my-icon'></vaadin-icon>
    </vaadin-tooltip>
"""));

动态绑定提示文本 #

如果需要根据Grid行数据动态生成提示内容，可通过withProperty绑定实体属性：

grid.addColumn(LitRenderer.<YourEntity>of("""
    <vaadin-tooltip text="${item.tooltipText}" slot="tooltip">
        <vaadin-icon icon='my-icon'></vaadin-icon>
    </vaadin-tooltip>
""").withProperty("tooltipText", YourEntity::getTooltipText));

方法2：使用原生HTML title属性 #

如果只需要基础的鼠标悬浮提示，直接给<vaadin-icon>添加原生title属性即可：

静态提示文本 #

grid.addColumn(LitRenderer.<>of("<vaadin-icon icon='my-icon' title='这是我的图标提示' />"));

动态绑定提示文本 #

grid.addColumn(LitRenderer.<YourEntity>of("<vaadin-icon icon='my-icon' title='${item.tooltipText}' />")
        .withProperty("tooltipText", YourEntity::getTooltipText));

内容的提问来源于stack exchange，提问作者The Shoe Shiner