Tooltip in header checkbox grid

Flow
1

I set up the grid as follows: grid.setSelectionMode(Grid.SelectionMode.MULTI); is there a way to add the tooltip on the grid header related to the checkbox?

2

You mean a tooltip for the Checkbox?

3

I need to add the tooltip in the header (see image)
image.png

4

That’s no possible with the Java API

5

You could do something like this

6 
getElement().executeJs("document.getElementById('selectAllCheckbox').title = 'Hello Select All'");

But this must run after the page has been fully loaded

7

This is a very hacky solution, because it needs a timeout to make sure that the page is fully loaded

addAttachListener(event -> getElement().executeJs("""
                setTimeout(function() {
                    document.getElementById('selectAllCheckbox').title = 'Hello Select All'
                }, 2000);"""));
8

Maybe someone else has a better solution

9

That could be a useful feature actually. You could make a feature request ticket at https://github.com/vaadin/web-components/issues/new?assignees=&labels=&template=feature-request.yml

10

I tried but it doesn’t work `public Grid buildGrid() {
Grid grid = new Grid<>(Person.class, false);

    grid.setSelectionMode(Grid.SelectionMode.MULTI);
    grid.addColumn(Person::getFirstName).setHeader("First name");
    grid.addColumn(Person::getLastName).setHeader("Last name");
    grid.addColumn(Person::getEmail).setHeader("Email");

    grid.setItems(generatePerson());
    grid.getColumns().get(0).getElement().executeJs("grid.getElementById('selectAllCheckbox').title = 'Hello Select All'");
    return grid;
}`
11

checkout my code

12

it’s wrapped in a setTimeout method

13

otherwise the call is too early

14

The second solution you provided worked. I would not however that the setTimeout can give errors.

15

Thank you very much!