Place touch tooltips above the finger by techniq · Pull Request #927 · techniq/layerchart

techniq · 2026-10-01T19:06:55Z

Resolves #485

changeset-bot · 2026-10-01T19:07:00Z

🦋 Changeset detected

Latest commit: c477828

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
layerchart	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

- Clamp tooltip placement to the visual viewport so zoomed pages do not place it off screen - Apply touch-style above-pointer placement to pen input as well as fingers

pkg-pr-new · 2026-10-02T21:12:18Z

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@927

commit: c477828

techniq · 2026-10-02T21:14:53Z

@ntainy (continued conversation from: #924 (comment))

Great feedback! I made those changes here (including the rebase). When you get a chance, could you see how these work for you? Thanks!

github-actions · 2026-10-02T21:15:04Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	`c477828`

github-actions · 2026-10-02T21:18:20Z

Bundle Size Analysis

⚠️ Warnings (1 significant size increase)

Item	Current	New	Change
🔴 `Tooltip`	152.60 KB _{37.13 gz}	155.39 KB _{37.85 gz}	+2.78 KB (+1.8%) _{+0.72 gz (+1.9%)}

Use-Case Scenarios

Core (7 changed)

Scenario	Current	New	Change
🟡 `core-canvas`	241.12 KB _{62.34 gz}	241.44 KB _{62.40 gz}	+0.32 KB (+0.1%) _{+0.06 gz (+0.1%)}
🟡 `core-line`	240.18 KB _{61.15 gz}	240.50 KB _{61.24 gz}	+0.32 KB (+0.1%) _{+0.08 gz (+0.1%)}
🟡 `core-scatter`	232.77 KB _{58.97 gz}	233.09 KB _{59.05 gz}	+0.32 KB (+0.1%) _{+0.08 gz (+0.1%)}
🟡 `core-geo`	226.14 KB _{58.02 gz}	226.46 KB _{58.06 gz}	+0.32 KB (+0.1%) _{+0.04 gz (+0.1%)}
🟡 `core-html`	225.44 KB _{57.56 gz}	225.76 KB _{57.64 gz}	+0.32 KB (+0.1%) _{+0.08 gz (+0.1%)}
🟡 `core-svg`	223.49 KB _{57.09 gz}	223.81 KB _{57.17 gz}	+0.32 KB (+0.1%) _{+0.07 gz (+0.1%)}
🟡 `core`	223.48 KB _{56.94 gz}	223.80 KB _{56.98 gz}	+0.32 KB (+0.1%) _{+0.04 gz (+0.1%)}

Base (agnostic) (4 changed)

Scenario	Current	New	Change
🟡 `base-svg-agnostic`	383.17 KB _{89.22 gz}	384.13 KB _{89.47 gz}	+0.96 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `base-canvas-agnostic`	383.17 KB _{89.22 gz}	384.13 KB _{89.48 gz}	+0.96 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `base-html-agnostic`	383.17 KB _{89.22 gz}	384.13 KB _{89.48 gz}	+0.96 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `base`	383.16 KB _{89.22 gz}	384.13 KB _{89.47 gz}	+0.96 KB (+0.3%) _{+0.25 gz (+0.3%)}

Base (layer-specific) (3 changed)

Scenario	Current	New	Change
🟡 `base-canvas`	370.41 KB _{86.60 gz}	371.30 KB _{86.86 gz}	+0.89 KB (+0.2%) _{+0.26 gz (+0.3%)}
🟡 `base-html`	362.20 KB _{84.08 gz}	363.08 KB _{84.33 gz}	+0.88 KB (+0.2%) _{+0.24 gz (+0.3%)}
🟡 `base-svg`	360.29 KB _{83.65 gz}	361.17 KB _{83.88 gz}	+0.88 KB (+0.2%) _{+0.23 gz (+0.3%)}

Cartesian charts (27 changed)

Scenario	Current	New	Change
🟡 `PieChart`	426.03 KB _{98.48 gz}	429.58 KB _{99.32 gz}	+3.54 KB (+0.8%) _{+0.84 gz (+0.9%)}
🟡 `ArcChart`	419.05 KB _{97.11 gz}	422.59 KB _{98.00 gz}	+3.54 KB (+0.8%) _{+0.89 gz (+0.9%)}
🟡 `LineChart`	414.44 KB _{96.58 gz}	415.48 KB _{96.81 gz}	+1.04 KB (+0.3%) _{+0.24 gz (+0.2%)}
🟡 `PieChart-canvas`	411.29 KB _{95.44 gz}	414.76 KB _{96.39 gz}	+3.47 KB (+0.8%) _{+0.95 gz (+1.0%)}
🟡 `ArcChart-canvas`	404.88 KB _{94.21 gz}	408.35 KB _{95.12 gz}	+3.47 KB (+0.9%) _{+0.91 gz (+1.0%)}
🟡 `AreaChart`	406.75 KB _{94.28 gz}	407.79 KB _{94.55 gz}	+1.04 KB (+0.3%) _{+0.27 gz (+0.3%)}
🟡 `PieChart-svg`	401.33 KB _{92.65 gz}	404.80 KB _{93.54 gz}	+3.47 KB (+0.9%) _{+0.89 gz (+1.0%)}
🟡 `line-chart-interactive`	400.37 KB _{93.06 gz}	403.84 KB _{93.95 gz}	+3.46 KB (+0.9%) _{+0.89 gz (+1.0%)}
🟡 `area-chart`	402.15 KB _{93.25 gz}	403.11 KB _{93.51 gz}	+0.96 KB (+0.2%) _{+0.26 gz (+0.3%)}
🟡 `ArcChart-svg`	394.91 KB _{91.31 gz}	398.38 KB _{92.20 gz}	+3.47 KB (+0.9%) _{+0.89 gz (+1.0%)}
🟡 `pie-chart`	396.69 KB _{92.20 gz}	397.66 KB _{92.44 gz}	+0.96 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `BarChart`	394.52 KB _{91.60 gz}	395.53 KB _{91.84 gz}	+1.01 KB (+0.3%) _{+0.24 gz (+0.3%)}
🟡 `AreaChart-canvas`	393.36 KB _{91.55 gz}	394.33 KB _{91.85 gz}	+0.97 KB (+0.2%) _{+0.29 gz (+0.3%)}
🟡 `bar-chart`	388.46 KB _{90.31 gz}	389.42 KB _{90.55 gz}	+0.96 KB (+0.2%) _{+0.24 gz (+0.3%)}
🟡 `ScatterChart`	388.02 KB _{90.28 gz}	389.07 KB _{90.56 gz}	+1.04 KB (+0.3%) _{+0.28 gz (+0.3%)}
🟡 `scatter-chart`	384.25 KB _{89.51 gz}	385.22 KB _{89.74 gz}	+0.97 KB (+0.3%) _{+0.24 gz (+0.3%)}
🟡 `line-chart`	383.66 KB _{89.27 gz}	384.63 KB _{89.52 gz}	+0.96 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `AreaChart-svg`	383.25 KB _{88.58 gz}	384.22 KB _{88.83 gz}	+0.97 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `BarChart-canvas`	380.81 KB _{88.81 gz}	381.75 KB _{89.07 gz}	+0.94 KB (+0.2%) _{+0.26 gz (+0.3%)}
🟡 `LineChart-canvas`	377.39 KB _{88.15 gz}	378.36 KB _{88.40 gz}	+0.97 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `ScatterChart-canvas`	374.54 KB _{87.46 gz}	375.51 KB _{87.71 gz}	+0.97 KB (+0.3%) _{+0.25 gz (+0.3%)}
🟡 `BarChart-svg`	370.71 KB _{85.85 gz}	371.64 KB _{86.09 gz}	+0.93 KB (+0.3%) _{+0.23 gz (+0.3%)}
🟡 `line-chart-canvas`	370.44 KB _{86.62 gz}	371.33 KB _{86.87 gz}	+0.89 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `LineChart-svg`	367.29 KB _{85.20 gz}	368.25 KB _{85.48 gz}	+0.96 KB (+0.3%) _{+0.28 gz (+0.3%)}
🟡 `ScatterChart-svg`	364.43 KB _{84.49 gz}	365.40 KB _{84.75 gz}	+0.97 KB (+0.3%) _{+0.26 gz (+0.3%)}
🟡 `line-chart-html`	362.22 KB _{84.09 gz}	363.10 KB _{84.34 gz}	+0.88 KB (+0.2%) _{+0.24 gz (+0.3%)}
🟡 `line-chart-svg`	360.31 KB _{83.66 gz}	361.20 KB _{83.89 gz}	+0.88 KB (+0.2%) _{+0.23 gz (+0.3%)}

Geo (3 changed)

Scenario	Current	New	Change
🟡 `geo-full`	457.87 KB _{108.59 gz}	458.84 KB _{108.83 gz}	+0.97 KB (+0.2%) _{+0.25 gz (+0.2%)}
🟡 `geo-tiles`	405.42 KB _{94.88 gz}	406.38 KB _{95.13 gz}	+0.96 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `geo`	400.30 KB _{93.21 gz}	401.27 KB _{93.47 gz}	+0.96 KB (+0.2%) _{+0.26 gz (+0.3%)}

Hierarchy (4 changed)

Scenario	Current	New	Change
🟡 `hierarchy-tree`	393.95 KB _{92.17 gz}	394.91 KB _{92.42 gz}	+0.96 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `hierarchy-treemap`	390.84 KB _{91.38 gz}	391.80 KB _{91.64 gz}	+0.96 KB (+0.2%) _{+0.27 gz (+0.3%)}
🟡 `hierarchy-pack`	390.25 KB _{91.29 gz}	391.21 KB _{91.55 gz}	+0.96 KB (+0.2%) _{+0.26 gz (+0.3%)}
🟡 `dodge`	387.97 KB _{90.64 gz}	388.94 KB _{90.92 gz}	+0.96 KB (+0.2%) _{+0.29 gz (+0.3%)}

Graph / network (4 changed)

Scenario	Current	New	Change
🟡 `dagre`	452.77 KB _{108.20 gz}	453.73 KB _{108.41 gz}	+0.96 KB (+0.2%) _{+0.21 gz (+0.2%)}
🟡 `force`	396.37 KB _{93.02 gz}	397.33 KB _{93.27 gz}	+0.96 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `sankey`	396.16 KB _{92.36 gz}	397.11 KB _{92.61 gz}	+0.95 KB (+0.2%) _{+0.25 gz (+0.3%)}
🟡 `chord`	392.84 KB _{91.43 gz}	393.80 KB _{91.68 gz}	+0.96 KB (+0.2%) _{+0.25 gz (+0.3%)}

Components (15 changed)

Scenario	Current	New	Change
🟡 `Axis`	216.22 KB _{49.27 gz}	216.76 KB _{49.43 gz}	+0.54 KB (+0.2%) _{+0.16 gz (+0.3%)}
🟡 `AnnotationPoint`	197.88 KB _{48.25 gz}	198.15 KB _{48.31 gz}	+0.27 KB (+0.1%) _{+0.07 gz (+0.1%)}
🟡 `Axis.svg`	185.95 KB _{43.00 gz}	186.49 KB _{43.15 gz}	+0.54 KB (+0.3%) _{+0.15 gz (+0.4%)}
🟡 `Axis.canvas`	184.08 KB _{42.82 gz}	184.62 KB _{42.96 gz}	+0.54 KB (+0.3%) _{+0.14 gz (+0.3%)}
🟡 `Axis.html`	180.38 KB _{41.62 gz}	180.92 KB _{41.77 gz}	+0.54 KB (+0.3%) _{+0.15 gz (+0.4%)}
🟡 `AnnotationPoint.svg`	173.56 KB _{42.90 gz}	173.84 KB _{42.98 gz}	+0.27 KB (+0.2%) _{+0.08 gz (+0.2%)}
🟡 `AnnotationRange`	167.22 KB _{39.61 gz}	167.39 KB _{39.64 gz}	+0.17 KB (+0.1%) _{+0.04 gz (+0.1%)}
🟡 `AnnotationPoint.canvas`	163.00 KB _{40.97 gz}	163.28 KB _{41.05 gz}	+0.28 KB (+0.2%) _{+0.08 gz (+0.2%)}
🔴 `Tooltip`	152.60 KB _{37.13 gz}	155.39 KB _{37.85 gz}	+2.78 KB (+1.8%) _{+0.72 gz (+1.9%)}
🟡 `AnnotationLine`	148.37 KB _{35.98 gz}	148.52 KB _{36.00 gz}	+0.15 KB (+0.1%) _{+0.02 gz (+0.1%)}
🟡 `AnnotationRange.svg`	139.03 KB _{33.29 gz}	139.19 KB _{33.33 gz}	+0.17 KB (+0.1%) _{+0.04 gz (+0.1%)}
🟡 `AnnotationRange.canvas`	137.77 KB _{33.76 gz}	137.96 KB _{33.83 gz}	+0.19 KB (+0.1%) _{+0.08 gz (+0.2%)}
🟡 `AnnotationLine.svg`	127.17 KB _{30.77 gz}	127.31 KB _{30.78 gz}	+0.14 KB (+0.1%) _{+0.01 gz (+0.0%)}
🟡 `AnnotationLine.canvas`	126.64 KB _{31.27 gz}	126.78 KB _{31.30 gz}	+0.14 KB (+0.1%) _{+0.03 gz (+0.1%)}
🟡 `Layer`	119.61 KB _{28.97 gz}	119.68 KB _{28.97 gz}	+0.07 KB (+0.1%) _{-0.00 gz (-0.0%)}

Worst case (1 changed)

Scenario	Current	New	Change
🟡 `all`	1111.64 KB _{262.54 gz}	1116.13 KB _{263.55 gz}	+4.49 KB (+0.4%) _{+1.01 gz (+0.4%)}

Understanding this report

Use-case scenarios measure the bundle cost of common chart configurations (e.g. a line chart with axes)
Individual components measure each component imported in isolation
Svelte runtime is excluded; sizes reflect layerchart + its dependencies (d3, etc.)
When multiple components share dependencies (e.g. d3-scale), the real-world cost is lower than the sum of individual sizes
Changes smaller than 10 bytes or 0.1% are considered insignificant

ntainy · 2026-10-12T09:26:22Z

hi, sorry for the slow reply, got buried for a bit

pulled and tested properly (arc/chromium at 360px vs 2.5.1). works really really well!

touch/pen: visualViewport top actually is much nicer than what i initially suggested, it's much better, didn't see a single issue there (is properly above the finger and clamped)
mouse seems identical
pinch thing: works perfectly (stays inside), zooming while locked properly repositions itself as ewll.

the only thing noticeable (not a regression though) is that with default contained container, if the box is wider than the container in the first place (minus y axis gutter), visibleBounds falls back to the container and so the left clamp wins, so on a 360px phone 310px box ended up still past the right edge even though it would have fit on the screen. idk what's the right solution for that would be -- maybe for portaled tooltips fall back to the visible viewport before the container? though a good moment to +1 again for making the contained window default in v3 as it doesn't have this issue :)

couple small additional things that were noticed by an agent in a separate pass:

pinch re-placement only subscribes when portaled, so portal={false} + window won't follow a pinch
facetAll panels get anchor="bottom" passed explicitly, so they don't get the "rise above the chart" min
maybe worth adding a test for touch + contained="window"?

Thanks again! and sorry for such a huge delay

ps: also I didnt check ios safari, so I still have no clue how it would look there

…itioned when pinch-zoomed

techniq · 2026-10-12T14:37:01Z

Great feedback, and no worries!

I've addressed all of these, and also noticed when pinch-zoomed the position of the tooltip was incorrect (and fixed as well).

I did a good bit of testing on my iPhone, but would love 1 more check before I merge and release,

ntainy mentioned this pull request Oct 2, 2026

fix(Tooltip, TooltipContext): Keep tap-pinned tooltips locked, and keep flipped tooltips inside the container #924

Merged

techniq added 2 commits October 2, 2026 10:31

Place touch tooltips above the finger

7831a04

Keep tooltips visible when pinch-zoomed

5059972

- Clamp tooltip placement to the visual viewport so zoomed pages do not place it off screen - Apply touch-style above-pointer placement to pen input as well as fingers

techniq force-pushed the techniq/tooltip-increase-default-x-y-offset-on-mobile-to branch from 0cbf9a0 to 5059972 Compare October 2, 2026 21:11

github-actions Bot deployed to Preview October 2, 2026 21:15

View deployment

techniq added 2 commits October 12, 2026 10:14

fix(Tooltip): keep pointer-aligned tooltips visible and correctly pos…

4380537

…itioned when pinch-zoomed

Fix window-contained tooltip positioning for touch and facets

1351b12

github-actions Bot deployed to Preview October 12, 2026 14:41

View deployment

techniq added 2 commits October 13, 2026 08:32

Update changeset

7cc3eac

Improve changeset

72e1c4a

github-actions Bot deployed to Preview October 13, 2026 12:38

View deployment

Document touch and pen tooltip placement behavior

c477828

github-actions Bot deployed to Preview October 13, 2026 12:51

View deployment

techniq merged commit a92dea6 into main Oct 13, 2026
10 checks passed

techniq deleted the techniq/tooltip-increase-default-x-y-offset-on-mobile-to branch October 13, 2026 13:17

github-actions Bot mentioned this pull request Oct 13, 2026

Version Packages #947

Merged

Navigation Menu

Repository navigation

Place touch tooltips above the finger - #927

Place touch tooltips above the finger#927
techniq merged 7 commits into
mainfrom
techniq/tooltip-increase-default-x-y-offset-on-mobile-to

techniq commented Oct 1, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Oct 1, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 2, 2026 •

edited

Loading

Uh oh!

techniq commented Oct 2, 2026

Uh oh!

github-actions Bot commented Oct 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 2, 2026 •

edited

Loading

Uh oh!

ntainy commented Oct 12, 2026

Uh oh!

techniq commented Oct 12, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

techniq commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pkg-pr-new Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

techniq commented Oct 2, 2026

Uh oh!

github-actions Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Uh oh!

github-actions Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Analysis

⚠️ Warnings (1 significant size increase)

Use-Case Scenarios

Uh oh!

ntainy commented Oct 12, 2026

Uh oh!

techniq commented Oct 12, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

techniq commented Oct 1, 2026 •

edited

Loading

changeset-bot Bot commented Oct 1, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 2, 2026 •

edited

Loading

github-actions Bot commented Oct 2, 2026 •

edited

Loading

github-actions Bot commented Oct 2, 2026 •

edited

Loading