Skip to content

fix(tooltips): correct positioning when containing block is offset from viewport#8171

Merged
ds300 merged 1 commit intomainfrom
david/fix-tooltip-positioning-with-transforms
Mar 9, 2026
Merged

fix(tooltips): correct positioning when containing block is offset from viewport#8171
ds300 merged 1 commit intomainfrom
david/fix-tooltip-positioning-with-transforms

Conversation

@ds300
Copy link
Copy Markdown
Collaborator

@ds300 ds300 commented Mar 6, 2026

When the tooltip singleton's trigger element has an ancestor with a CSS transform (e.g. transform3d), position: fixed positions relative to that ancestor's containing block rather than the viewport. Since getBoundingClientRect() always returns viewport-relative coordinates, directly using those values as left/top produces incorrect positioning.

This PR fixes the issue by first placing the trigger at (0, 0), reading back the containing block's offset via getBoundingClientRect(), and then subtracting that offset to compute the correct CSS position.

Change type

  • bugfix

Test plan

  1. Embed tldraw inside a container that uses transform: translate3d(...) or similar CSS transform
  2. Hover over toolbar buttons and other tooltip-bearing elements
  3. Verify tooltips appear correctly positioned next to their target elements

Release notes

  • Fixed tooltip positioning when tldraw is rendered inside a container with CSS transforms.

Made with Cursor


Note

Low Risk
Low risk UI-only change that adjusts how tooltip trigger left/top are computed; main risk is minor regressions in edge-case layout/positioning.

Overview
Fixes incorrect tooltip placement when tldraw is rendered inside a transformed/offset containing block by adjusting the singleton trigger’s position: fixed coordinates.

The trigger is now temporarily placed at (0,0), its containing-block offset is read via getBoundingClientRect(), and that offset is subtracted from the target element’s viewport rect to compute the correct left/top.

Written by Cursor Bugbot for commit d384470. This will update automatically on new commits. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
examples Ready Ready Preview Mar 6, 2026 11:14am
5 Skipped Deployments
Project Deployment Actions Updated (UTC)
analytics Ignored Ignored Mar 6, 2026 11:14am
chat-template Ignored Ignored Preview Mar 6, 2026 11:14am
tldraw-docs Ignored Ignored Preview Mar 6, 2026 11:14am
tldraw-shader Ignored Ignored Preview Mar 6, 2026 11:14am
workflow-template Ignored Ignored Preview Mar 6, 2026 11:14am

Request Review

Copy link
Copy Markdown
Contributor

@kaneel kaneel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ds300 ds300 added this pull request to the merge queue Mar 9, 2026
@ds300 ds300 added the sdk-hotfix-please ⚙️ Triggers SDK hotfix release after merge label Mar 9, 2026
Merged via the queue into main with commit 5d2e4fc Mar 9, 2026
29 checks passed
@ds300 ds300 deleted the david/fix-tooltip-positioning-with-transforms branch March 9, 2026 09:47
huppy-bot bot pushed a commit that referenced this pull request Mar 9, 2026
…om viewport (#8171)

When the tooltip singleton's trigger element has an ancestor with a CSS
`transform` (e.g. `transform3d`), `position: fixed` positions relative
to that ancestor's containing block rather than the viewport. Since
`getBoundingClientRect()` always returns viewport-relative coordinates,
directly using those values as `left`/`top` produces incorrect
positioning.

This PR fixes the issue by first placing the trigger at `(0, 0)`,
reading back the containing block's offset via
`getBoundingClientRect()`, and then subtracting that offset to compute
the correct CSS position.

### Change type

- [x] `bugfix`

### Test plan

1. Embed tldraw inside a container that uses `transform:
translate3d(...)` or similar CSS transform
2. Hover over toolbar buttons and other tooltip-bearing elements
3. Verify tooltips appear correctly positioned next to their target
elements

### Release notes

- Fixed tooltip positioning when tldraw is rendered inside a container
with CSS transforms.

Made with [Cursor](https://cursor.com)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only change that adjusts how tooltip trigger `left`/`top`
are computed; main risk is minor regressions in edge-case
layout/positioning.
> 
> **Overview**
> Fixes incorrect tooltip placement when `tldraw` is rendered inside a
transformed/offset containing block by adjusting the singleton trigger’s
`position: fixed` coordinates.
> 
> The trigger is now temporarily placed at `(0,0)`, its containing-block
offset is read via `getBoundingClientRect()`, and that offset is
subtracted from the target element’s viewport rect to compute the
correct `left`/`top`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d384470. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
github-merge-queue bot pushed a commit that referenced this pull request Mar 18, 2026
In order to publish the v4.5.0 release notes and record the v4.4.1
patch, this PR archives release notes and resets `next.mdx` for the next
cycle.

**v4.5.0.mdx** (new file):
- Archived from `next.mdx` with full frontmatter, keywords, and GitHub
release link
- Featured sections: click-through on transparent image pixels (#7942),
breaking `EmbedShapeUtil.configure()` change (#8034)
- API changes: `Editor.getResizeScaleFactor()` (#8042),
`TLImageAsset.pixelRatio` (#8163), `sanitizeSvg` (#7896),
`experimental__onDropOnCanvas` (#7911), enum-to-const refactoring
(#8084)
- 6 improvements and 20 bug fixes from production

**v4.4.0.mdx:**
- Add v4.4.1 patch release section with tooltip positioning fix (#8171)
- Add v4.4.1 to keywords

**next.mdx:**
- Reset with `last_version: v4.5.0` and empty content

### Change type

- [x] `other`

### Code changes

| Section       | LOC change    |
| ------------- | ------------- |
| Documentation | +128 / -107   |
huppy-bot bot pushed a commit that referenced this pull request Mar 18, 2026
In order to publish the v4.5.0 release notes and record the v4.4.1
patch, this PR archives release notes and resets `next.mdx` for the next
cycle.

**v4.5.0.mdx** (new file):
- Archived from `next.mdx` with full frontmatter, keywords, and GitHub
release link
- Featured sections: click-through on transparent image pixels (#7942),
breaking `EmbedShapeUtil.configure()` change (#8034)
- API changes: `Editor.getResizeScaleFactor()` (#8042),
`TLImageAsset.pixelRatio` (#8163), `sanitizeSvg` (#7896),
`experimental__onDropOnCanvas` (#7911), enum-to-const refactoring
(#8084)
- 6 improvements and 20 bug fixes from production

**v4.4.0.mdx:**
- Add v4.4.1 patch release section with tooltip positioning fix (#8171)
- Add v4.4.1 to keywords

**next.mdx:**
- Reset with `last_version: v4.5.0` and empty content

### Change type

- [x] `other`

### Code changes

| Section       | LOC change    |
| ------------- | ------------- |
| Documentation | +128 / -107   |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bugfix Bug fix sdk-hotfix-please ⚙️ Triggers SDK hotfix release after merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants