google / google/material-design-lite
Bug - Tooltips not aligning correctly in certain elements
- 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
Assessment
This issue has not been assessed yet.