Material-ui: Tooltip broken in new release

[andrispraulitis]

Possible bug?

There is something messed up with Tooltip. Position is always bottom left of the container, see example from Material demos: demo

[alex-fournier]

I can confirm this, another example : https://codesandbox.io/s/l8jw1y98q

We had a discussion on this on Gitter, a possible suspect is the last release of popper.js (1.14.2).

[andrispraulitis]

Thanks for confirming. I tried downgrading Material release and bug was still there so not sure if it was Material bug or something else.

[andrispraulitis]

@alex-fournier but your example does work fine. How come?

[alex-fournier]

No it doesn't. If you look closely, tooltips are not correctly placed, you can compare with https://material-ui-next.com/demos/tooltips/#positioned-tooltips

Another example : https://codesandbox.io/s/p333nq70y0
Tooltip should be vertically aligned with the button.

[andrispraulitis]

But better than completely bottom left of the page :)

[alex-fournier]

Sure, I have the same problem as you on my existing project.

I'm unable to load your example on stackblitz.

[andrispraulitis]

I installed all latest updates to the project I'm working on and Tooltips are completely off position:

See where "Click to logout" tooltip is? (should be bottom of "Hello Andris")

[andrispraulitis]

@alex-fournier To run Materials demo example on stackblitz just click options icon and option "Edit in StackBlitz" (Positioned tooltips example)

[albinekb]

I can confirm tooltips are broken for me in the latest release (beta 40), they are not positioned correctly, all of them appear at (0,0)

[albinekb]

If you're using yarn, add

  "resolutions": {
    "material-ui/react-popper": "0.7.4",
    "material-ui/react-popper/popper.js": "1.12.5"
  },

to your package.json and run yarn, as a temporary workaround 👍

[alex-fournier]

The workaround is working well! Thanks! It can be even shorter:

"resolutions": {
  "material-ui/react-popper/popper.js": "1.14.1"
}

Also, [email protected] is the last working release. Only 1.14.2 is causing problems.

[andrispraulitis]

Any workaround for npm instead of yarn?

[albinekb]

No, npm does not support custom module resolution to my knowledge @andrispraulitis. I think we should open an issue over at react-popper with this regression and perhaps downgrade to the working version of react-popper in here, I can do a PR.

Thoughts @oliviertassinari ?

[oliviertassinari]

@albinekb Let's see if the regression can be quickly solved on popper.js side first :) https://github.com/souporserious/react-popper/issues/122.

[alex-fournier]

@andrispraulitis i'm not sure but try npm install [email protected]. If you have flat dependencies, it should fix the version and other packages will use it if the semver matches.

[albinekb]

This was just fixed in https://github.com/FezVrasta/popper.js/releases/tag/v1.14.3 🎉 Confirmed working without the module resolution workaround. I think this can be closed.

[andrispraulitis]

Thanks, it is indeed working again :)

[andrispraulitis]

I think Tooltip is broken again. I really don't have an example because tooltip randomly appears top left corner. Anyone else having this issue?

[albinekb]

I don't have any issues with tooltips in material-ui-1.0.0-beta.43

[oliviertassinari]

Let's move the discussion to a new issue.

[mbrookes]

https://github.com/mui-org/material-ui/issues/11165