This repository was archived by the owner on Dec 5, 2024. It is now read-only.
This repository was archived by the owner on Dec 5, 2024. It is now read-only.
Open
Description
Reproduction demo
There are instructions on ho 53F5 w to use the demo, and how to reproduce the bug step-by-step in the demo.
Steps to reproduce the problem
- Create a virtual element that will be the reference point for positioning the tooltip
- Create a tooltip with :
- a placement "top"
- an offset big enough to position an arrow inside
- a reference to an arrow element
- Place the virtual element so that the tooltip would collide with the borders if placed above the reference
- the tooltip will flip to place under the virtual element
- the arrow should place itself above the tooltip but remains under
Alternative that causes the same bug
- Follow the same procedure as above, but use a placement "left" this time
- The arrow never positions itself properly between the tooltip and the virtual element, whether the tooltip has flipped or not
What is the expected behaviour?
- The arrow element should always place itself between the virtual element and the tooltip, even when the tooltip is flipped to avoid collisions with the window border.
What went wrong?
- When flipping the tooltip across the vertical axis, the arrow remains positioned under the tooltip instead of translating above of it.
- When using an horizontal axis, the arrow element remains inside the tooltip instead of outside, and the same issue with the flipping not moving the arrow to be placed between the tooltip and the origin happens as well.
Any other comments?
Not sure whether this bug is caused by :
- using a virtual element
- the react-popper library
- the popper library
Packages versions
- Popper.js: 2.11.6
- react-popper: 2.3.0
Metadata
Metadata
Assignees
Labels
No labels