Blueprint: [Tooltip] Flickering with parent that has overflow: auto.

[ellisio]

Environment

• __Package version(s)__: [email protected]
• __Browser and OS versions__: Chrome 80.0.3987.132

If possible, link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/stoic-meitner-ymv8s

Steps to reproduce

1. Hover the "Home" icon.
2. Observe the Tooltip flickers, and doesn't position itself to the right.

Expected behavior

1. Expect the Tooltip to display to the right, just like the "Expand" icon at the bottom of the sidebar.

Details

The .primary-items div contains overflow: auto. This is so the top group will scroll if a user shrinks their browser to a small enough view port. If I remove this div, the tooltips behave fine, as can be seen with the expand icon at the bottom.

[adidahiya]

Can you try messing around with the popper.js modifiers? There are a few layout things going on in your example with position: fixed on sidebar and overflow: hidden on body... which might be preventing the positioning algorithm from working

[ellisio]

@adidahiya You rock! Adding the following solves it:

modifiers={{
  preventOverflow: { enabled: false },
  flip: { enabled: false }
}}

The preview has been updated to show this. I left the top one "broken", and added a few below with the fix to demonstrate so others can see.