Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HerbertsVaadin opened this issue Feb 14, 2025 · 2 comments
Open

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

HerbertsVaadin opened this issue Feb 14, 2025 · 2 comments
Labels

Comments

@HerbertsVaadin
Copy link

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.

Grid_tooltip_not_showing.mp4

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

@web-padawan
Copy link
Member

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

@yuriy-fix
Copy link
Contributor

The vaadin/web-components#6474 need to be addressed first in order to avoid this limitation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants