如何在 Vaadin Flow 中显示网格单元格工具提示

Question

使用 Vaadin 8，您可以为网格单元格设置工具提示。此功能在 Vaadin Flow 中不可用（当前使用 v 11.0.0）。有替代方案吗？

Answer 1

还没有内置功能。最简单的方法可能是设置元素的 "title" 属性。一个例子是使用 TemplateRenderer，这里有一个例子

https://vaadin.com/components/vaadin-grid/java-examples/using-templates

从上面的例子中复制代码的相关部分

grid.addColumn(TemplateRenderer.<Person> of(
        "<div title='[[item.name]]'>[[item.name]]<br><small>[[item.yearsOld]]</small></div>")
        .withProperty("name", Person::getName).withProperty("yearsOld",
                person -> person.getAge() > 1
                        ? person.getAge() + " years old"
                        : person.getAge() + " year old"))
        .setHeader("Person");

Answer 2

感谢@Tatu-Lund 的回答，我明白了，但由于 link 不再指代有效位置，而且带有 div 的示例代码可能会带来其他复杂性游戏我决定post另一个答案

使用 div 作为具有 title 属性的包装元素会起作用，但它会阻止调整列的大小。所以使用 span 将是一个很好的替代品。

此外，设置 title 将有助于显示正常的工具提示，但这不足以支持辅助功能。除了 title 之外还设置 aria-label 会使它更平滑：

grid.addColumn(TemplateRenderer.<Person> of(
    "<span title='[[item.name]]' aria-label='[[item.name]]'>[[item.name]]</span>")
    .withProperty("name", Person::getName)
    .setHeader("Person");

但是，这不是一个完整的解决方法，因为这无助于在触摸设备上浏览 Web 应用程序。详情请参考以下问题：https://github.com/vaadin/flow/issues/4169

如何在 Vaadin Flow 中显示网格单元格工具提示

How to display a Grid cell tooltip in Vaadin Flow

tooltip

vaadin

vaadin-grid

vaadin14