dequelabs / dequelabs/cauldron

Tooltip flipping behavior can cover critical content

Open
#1,828 0 comments 0 reactions 0 assignees View on GitHub
info needed
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.

![](https://github.com/user-attachments/assets/73f085a7-814c-4b1e-83cd-f0335f872875)

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.