With Vaadin 8 you could set a tooltip for a Grid cell. This feature is not available in Vaadin Flow (currently using v 11.0.0). Is there an alternative?
There is no built-in feature yet. The easiest way is probably to set "title" attribute of the element. One example is to use TemplateRenderer, and there is example of that here
https://vaadin.com/components/vaadin-grid/java-examples/using-templates
Copying the relevant part of the code from the example above
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");
Thanks to @Tatu-Lund's answer I got the idea, but since the link is not referring to a valid location anymore, and also the example code with div
can bring other complexities into the game I decided to post another answer.
Using div
as the wrapper element to have the title
attribute would work, but it will prevent the columns to be resized. So using span
would be a good replacement.
Also, setting the title
would help with a normal tooltip to show up, but it is not enough for accessibility support. Setting the aria-label
in addition to the title
would make it smoother:
grid.addColumn(TemplateRenderer.<Person> of(
"<span title='[[item.name]]' aria-label='[[item.name]]'>[[item.name]]</span>")
.withProperty("name", Person::getName)
.setHeader("Person");
However, this is not a complete workaround as this would not help to browse the web app on touch devices. Please refer to the following issue for more information: https://github.com/vaadin/flow/issues/4169
© 2022 - 2024 — McMap. All rights reserved.