Add viewport fit adjustment and tests for Tooltip component

[tweetgeek]

Cross-resolution verification

📊 Full evidence page — measurements and before/after screenshots

Problem

On narrow viewports a tooltip with a long text overflowed the left edge of the screen and became unreadable, instead of fitting into the viewport.

Measured on the Tooltip / Interactive story at a 320 px viewport: left: -170px, width: 490px.

Two causes stack up:

1. Tooltip.vue passed a hardcoded dt.maxWidth: '900px', which ignores the screen width entirely, so the tooltip was simply wider than the viewport.
2. PrimeVue does not clamp the tooltip horizontally. alignTop / alignBottom set left = triggerLeft + (triggerWidth - tooltipWidth) / 2, and isOutOfBounds only ever flips between top and bottom. Centering a wide tooltip on a narrow screen yields a negative left.

Changes

• Tooltip.consts.ts — new constants: TOOLTIP_MAX_WIDTH_PX, TOOLTIP_VIEWPORT_MARGIN_PX (8 px), TOOLTIP_ARROW_EDGE_INSET_PX.
• Tooltip.utils.ts (new) — pure helpers getTooltipViewportFitShift and getTooltipArrowOffset.
• Tooltip.vue:
  • maxWidth is now min(900px, calc(100vw - 16px)), so the tooltip is never wider than the screen;
  • a MutationObserver picks the tooltip up as it is appended to body and nudges it back into the viewport. PrimeVue positions the element synchronously right after create(), so the correction lands before paint — no flicker;
  • the arrow is shifted by the same amount in the opposite direction, so it keeps pointing at the trigger.
• Tooltip.spec.ts (new) — 9 regression tests covering the fit logic.

One thing worth calling out: the tooltip uses width: fit-content, so next to an edge it shrinks against it and measuring the width after positioning gives a value that is too small. The width is therefore measured only after moving the element away from the edge — without that, the right side still touched the screen edge.

Verification

Browser measurements on the Interactive story, 320 px viewport:

Case	Before	After
trigger centered	left: -170	left: 8, right: 312
trigger at the left edge	left: -76.5	left: 8, right: 312
trigger at the right edge	right: 320 (no gutter)	left: 8, right: 312

Arrow offset from the trigger centre: 0 px in every case. Desktop (1280 px) is unchanged — max-width: 900px, tooltip centered, shift = 0.

yarn lint, yarn format:check, yarn ts:check all clean. yarn test — 762 tests across 56 files, all passing.

[tweetgeek]

/build

[github-actions]

Branch: fix_mobile_tooltip-dist
Last commit: 36d15248a36ca71789256ab98fbafc04998186cb
Install: yarn add '@bethinkpl/design-system@https://github.com/bethinkpl/design-system#commit=36d15248a36ca71789256ab98fbafc04998186cb'