flow-components icon indicating copy to clipboard operation
flow-components copied to clipboard

[Grid] Tooltip appears only if cell is fully visible.

Open HerbertsVaadin opened this issue 10 months ago • 2 comments

Description

Hi, I have a grid that has several columns and it is wide enough to cause some horizontal scrolling. One of the columns has a tooltip. When I have scrolled the column into view and hover over the individual cells nothing appears, unless the whole column is visible. Please see the video below for how it appears.

https://github.com/user-attachments/assets/384cc267-e03f-4b9b-920c-f0e934688e10

Expected outcome

I would expect for the tooltip to appear even when the column is only partially visible.

Minimal reproducible example

Modification to "Grid with Filters" from https://start.vaadin.com/app/p

private Component createGrid() {
        grid = new Grid<>(SamplePerson.class, false);
        grid.addColumn("firstName").setAutoWidth(true);
        grid.addColumn("lastName").setAutoWidth(true);
        grid.addColumn("email").setAutoWidth(true);
        grid.addColumn("phone").setAutoWidth(true);
        grid.addColumn("dateOfBirth").setAutoWidth(true);
        grid.addColumn("occupation").setTooltipGenerator(item -> "Occupation tooltip for " + item.getOccupation()).setAutoWidth(true);
        grid.addColumn("role").setAutoWidth(true);

        grid.setItems(query -> samplePersonService.list(VaadinSpringDataHelpers.toSpringPageRequest(query), filters)
                .stream());
        grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
        grid.addClassNames(LumoUtility.Border.TOP, LumoUtility.BorderColor.CONTRAST_10);

        return grid;
    }

Steps to reproduce

You can use "Grid with Filters" example https://start.vaadin.com/app/p and set tooltip generation for one of the columns that can be hidden by scrolling

grid.addColumn("occupation").setTooltipGenerator(item -> "Occupation tooltip for " + item.getOccupation()).setAutoWidth(true);
  1. Open web app which has a grid
  2. Make window small enough so that the grid has horizontal scroll, and that the column with tooltips can be hidden.
  3. Scroll to fully reveal the column with tooltips
  4. Verify that you can see a tooltip when hovering over a cell in that column.
  5. Scroll to hide part of the column with tooltips
  6. Verify that you can no longer see tooltips when hovering over a cell in that column

Environment

Vaadin version(s): 24.6 OS: Linux Mint 22

Browsers

Chrome, Firefox

HerbertsVaadin avatar Feb 14 '25 16:02 HerbertsVaadin

Thanks for the issue. We had another problem reported previously at https://github.com/vaadin/web-components/issues/7744 where tooltip wasn't shown correctly with not fully visible cell, so the current behavior is by design: https://github.com/vaadin/web-components/pull/7749

web-padawan avatar Feb 14 '25 17:02 web-padawan

The https://github.com/vaadin/web-components/issues/6474 need to be addressed first in order to avoid this limitation.

yuriy-fix avatar Feb 20 '25 14:02 yuriy-fix