logo标签列表

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

tooltipvaadinvaadin-gridvaadin14
8

在Vaadin 8中，您可以为Grid单元格设置工具提示。然而在Vaadin Flow中（当前使用版本为11.0.0），此功能不可用。是否有其他的替代解决方案？

2个回答
8

目前尚无内置功能。最简单的方法可能是设置元素的"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");
4
感谢@Tatu-Lund的回答，我得到了灵感，但由于链接不再指向有效位置，并且使用
作为包装元素还会带来其他复杂性，因此我决定发表另一个答案。
使用
作为包装元素并具有属性将起作用，但它会阻止列的调整大小。因此，使用<span>将是一个很好的替代方案。</br><div class="h-2"></div>此外，在设置<title>以显示普通工具提示之外，还应将<aria-label>与<title>一起设置，这将使其更加平滑：</br><div class="h-2"></div><pre class="guess-Ini"><code>grid.addColumn(TemplateRenderer.<Person> of( "<span title='[[item.name]]' aria-label='[[item.name]]'>[[item.name]]</span>") .withProperty("name", Person::getName) .setHeader("Person"); </code></pre></br><div class="h-2"></div>然而，这并不是一个完整的解决方案，因为这不能帮助触摸设备上浏览Web应用程序。有关更多信息，请参阅以下问题：<a href="https://github.com/vaadin/flow/issues/4169" rel="nofollow noreferrer">https://github.com/vaadin/flow/issues/4169</a>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接