Bug - Tooltips not aligning correctly in certain elements

[brucedlukens]

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?

[puranjayjain]

@brucedlukens can you add a test link to the issue? with css and html. I had experienced a similar issue recently maybe i can help

[brucedlukens]

Here is a JSFiddle showing the issue. The first row of buttons is displaying the correct tooltips, the second row of buttons is the issue I'm referring to. https://jsfiddle.net/svan6ntd/7/

[puranjayjain]

@brucedlukens why not use these components instead ? They are well maintained and made for react framework and up-to-date with the latest version of mdl

[brucedlukens]

@puranjayjain Our team has decided against Material-UI for a few different reasons. This issue seems like it will present itself outside of react as well.

[puranjayjain]

@brucedlukens i'll try to solve it with mdl then give me some time to cookup a hotfix

[puranjayjain]

@brucedlukens try this setting on the secondGroup it will work like magic (tested in chrome 49) #secondGroup { /* transform: translate(0px, 0px); */ display: block; }

[brucedlukens]

@puranjayjain All you did was take the problem, and comment out the problem.... That's not a solution. Has anyone from the MDL community looked into this issue or have a workaround?

[puranjayjain]

@brucedlukens so that transform property is required by you? You can also override the transform property by using transform: none !important; If that doesnt solve your problem you can escalate the issue at the gitter chat or post it on stackoverflow as well.

[puranjayjain]

sorry my bad @brucedlukens there is another solution however, without removing the transform property if you want, add this property top: 20px !important; to all the tooltips in the second row, it will work (psst) its a dirty fix

[brucedlukens]

@puranjayjain Thank you for the dirty fix, that may be what I'll have to do in the meantime. I do still think that this is an issue in the mdl tooltips, especially seeing as how you can have other mdl components inside the transform div and they all work correctly, but the tooltips do not. This inconsistency is the main problem.

[puranjayjain]

@brucedlukens there are some problems with how the component calculates its position, hopefully it will be fixed soon.

[RanzQ]

I had this problem with riot.js too, the solution was to append the tooltip to the document body, since the tooltip css defines a fixed position and the position calculation is based on the absolute position of the element (button). So, on mount I append the tooltip into body and upgrade it, on unmount I remove it. Not sure how this should be done in React though.

[laander]

Same problem here: if a tooltip is placed inside a parent that has a transform, positioning screws up.

As @RanzQ said, a quick fix is to place the tooltip DOM element outside that parent. It does however makes component-based design somewhat harder because changing the DOM hierarchy isn't always possible.

Any progress on fixing the positioning root problem?

[alexkubica]

Still having this issue on the latest version (1.3.0) when placing the tooltip inside a dialog. Either disabling the transform on the dialog with: transform: none !important or placing the dialog outside it worked for me. Why is the transform property needed for the dialog component? I don't see any visual changes.