[Tooltip] custom flip behavior causing placement issues due to margin

[Sharakai]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When the Tooltip is provided with a custom flip behavior (via PopperProps, it should be positioned correctly, in the order specified, and with correct separation from the target to the tooltip.

Current Behavior

If the custom flip behavior causes the tooltip to go from right/left to top/bottom, then the tooltip pops in and out at different places as it is opening/closing, and it does not position correctly causing it to overlap the target.

This is because there are multiple updates occurring within react-popper (at least one as a result of the current material-ui implementation), and the current Tooltip styles apply only a left-right margin (if placement is "left" or "right") or a top-bottom margin (if placement is "top" or "bottom").

1. On the very initial calculation, the "placement" is to the right (as that is where I have defined it to start at with the placement prop).
2. MUI applies a 24px/14px margin to the left and right of the tooltip (https://github.com/mui-org/material-ui/blob/v1.3.1/packages/material-ui/src/Tooltip/Tooltip.js#L65).
3. popper.js determines that the tooltip doesn't fit to the right, but DOES fit at the top.
4. MUI applies a 24px/14px margin to the top and bottom of the tooltip (https://github.com/mui-org/material-ui/blob/v1.3.1/packages/material-ui/src/Tooltip/Tooltip.js#L72), removing the left-right margin
5. popper.js determines that the tooltip doesn't fit at the right or top (because of the additional margin), but does to the left.
6. Repeat from step 2 for as many renders / updates there are.

Steps to Reproduce (for bugs)

You can see this in the following codesandbox, by hovering over the red "Tile" and watching the tooltip "pop" in at the top before settling at the top-left,
https://codesandbox.io/s/l464lv7wv9?module=%2Fsrc%2Fpages%2Findex.js
(See src/pages/index.js for the implementation)

If you uncomment the margin: 14px !important on line 17, you'll see that the issue is fixed as the tooltip will now have a constant size regardless of placement. This will now mean, however, that the tooltip cannot push up against the edge of the viewport, and will be (at a minimum) 14px from the edge (but perhaps this can be countered by a negative position, e.g. top -14px?).

Context

We have a tile that can be dragged around the screen, with a large tooltip that provides helpful information on hover. When the user drags the tile to the top right, we get this issue.

Your Environment

Tech	Version
Material-UI	v1.3.1 (although originally found on v1.2.0)
React	v16.4.1
browser	Chrome 67
etc

[Sharakai]

For what it's worth, this issue is slightly exacerbated by the use of an inline arrow-function in MUI's Tooltip render function (https://github.com/mui-org/material-ui/blob/v1.3.1/packages/material-ui/src/Tooltip/Tooltip.js#L348).

react-popper schedules an extra update on every Tooltip render, as it sees nextProps.children !== this.props.children (https://github.com/FezVrasta/react-popper/blob/v0.10.4/src/Popper.js#L64)

For every update on popper.js, it seems to re-run the Tooltip's render function, thus re-applying MUI's margin styling resulting in the placement changing again.

[oliviertassinari]

@Sharakai I can't find of any better workaround that applying the same margin to the tooltip, no matter the placement. Unfortunately, we can't move this logic into the core as it's breaking the -start and -end placement. Are you happy with this story? Can we close the issue?

On a related topic, we might have the same issue with the auto placement. But it's not something we officially support. At least yet.

[Sharakai]

@oliviertassinari I presume, then, that any consumer defining a custom flip.behavior akin to ['right', 'top', 'left', 'bottom'] will need to override the tooltipPlacementX styles in order to apply a standard margin?
This would, of course, be at expense of it not working with -start and -end placements, nor with it aligning correctly along the edge of the viewport.

Happy to close if this is considered un-fixable at present. Thanks for looking at it nevertheless 👍
I'll keep investigating when I get time and see if there is a novel solution to it.

[oliviertassinari]

@Sharakai Yes, I think that it's structural. I can't see how we could make both works at the same time. We have to prioritize, start/end feature wins.

Be aware that we have reworked the Tooltip implementation. Your following code sample will no longer work as expected:

  <Tooltip
    title="My Tooltip"
    placement="right"
    classes={{ tooltip: props.classes.tooltip }}
    PopperProps={{
      modifiers: {
        flip: {
          behavior: ["right", "top", "left", "bottom"]
        }
      }
    }}
  >

I'm working on fixing this breaking change. Hold on.