How to display a Grid cell tooltip in Vaadin Flow
Asked Answered
R

2

8

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?

Ranchero answered 15/9, 2018 at 12:52 Comment(0)
W
8

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");
Wailful answered 15/9, 2018 at 13:54 Comment(0)
F
4

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

Firdausi answered 25/8, 2021 at 9:19 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.