dequelabs / dequelabs/cauldron
Tooltip flipping behavior can cover critical content
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
## Problem
Cauldron uses `floating-ui` under the hood to managed "anchored overlays" to present floating content on top of other content. When a tooltip is positioned close to the edge of the screen, this can sometimes cause an undesired behavior of covering adjacent content (as seen in [Tooltip documentation](https://cauldron.dequelabs.com/components/Tooltip) below) when the tooltip "flips" to account for lack of available spacing with the desired placement.

## Potential Solution
We're currently using [`flip`](https://floating-ui.com/docs/flip) and [`autoPlacement`](https://floating-ui.com/docs/autoPlacement) middleware (depending on the initial placement. To manage anchored overlay positioning. There is a [`shift`](https://floating-ui.com/docs/shift) middleware that we could potentially use but we need to account for:
- How arrow be positioned? (when using tooltip)
- How would this effect other elements that use anchored overlay? (currently just Popover and Tooltip)
- Should anchored elements be able to be scrolled out of view? (something that we likely want for tooltips)
Contributor guide
Assessment
This issue has not been assessed yet.