google / google/material-design-lite

Bug - Tooltips not aligning correctly in certain elements

Open
#4,221 14 comments 3 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

I have an issue with mdl tooltips not aligning correctly and I have tracked it down to what I believe is the problem. I have a large web app where elements can either be displayed within the third party library react-grid-layout, or outside of react-grid-layout. If an item is within react-grid-layout, none of the tooltips align correctly, they're always offset by the same offset of the react-grid-layout region from the parent container. This is because the react-grid-layout regions call transform: translate(X, Y) (X and Y being a pixel offset from the region in the top left, the top left region is always set as 0px, 0px, even if it's halfway down a page).
This seems to cause the MDL tooltips to base their position information on the referenced element's position within the overall window, but when it sets the position information on the tooltip itself, it seems to think that the react-grid-layout's top left region is at 0px, 0px of the entire screen, using that as a reference point. This causes the tooltips to display too far right and too far bottom.
I guess my point is that the tooltips are using one set of position information (absolute window pixels) to adjust where they are based on a relative position (pixels within a parent element that has used transform: translate). If someone has seen something like that before and knows of a fix, that would be much appreciated, but I think this may be an underlying, albeit rare, issue built into mdl tooltips?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.