adobe / adobe/react-spectrum

tooltip positioning for placement left and right

Open
#7,654 7 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Positioning of the tooltip is wrong, only for placement left/right, when the page's body has `position: relative` and it has scrolled.

**Note**: the positioning for top/bottom using the same mentioned style works without problem.

### 🤔 Expected Behavior?

Positioning with placement left/right is correct as it happens already with top/bottom.

### 😯 Current Behavior

Tooltip is off by some amount, even far from the anchor element (might be even not on viewport).

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

This sandbox shows the problem when body has `position: relative`. Just scroll until the "yellow" is not visible in the viewport and hover the buttons. The first has `placement="top"` and the positioning is OK, while the second has `placement="right"` and it FAILS. The tooltip is shown far from the anchor.

https://codesandbox.io/p/sandbox/upbeat-tristan-7rgqjc

![Image](https://github.com/user-attachments/assets/dcd49a8b-1d8b-4db6-98ab-40e899e4388a)

---

For example, in the current docs shows such behavior, just add to the `body` the following style `position: relative`.

https://react-spectrum.adobe.com/react-aria/Tooltip.html#placement

**No problem if body has not position** (tooltip is the correct place):
![Image](https://github.com/user-attachments/assets/6af1bfbe-13e8-44c0-a1a5-8cc75be9187c)

**Problem when body has position** (tooltip is not in the expected place):
![Image](https://github.com/user-attachments/assets/7ffe272c-829c-415b-a32e-524c0cf22961)

---

It is also reproducible using the example: https://react-spectrum.adobe.com/react-spectrum/Tooltip.html#placement

### Version

latest

### What browsers are you seeing the problem on?

Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

Mac OS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

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.