From a40d1573c5549478cbf8cc4e6b7f6b067197fc09 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 1 Jul 2026 13:52:40 +0200 Subject: [PATCH] =?UTF-8?q?fix(tooltip):=20restore=20the=20visible=20caret?= =?UTF-8?q?=20=E2=80=94=20keep=20only=20the=20distance=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit My previous commit (4afadfd7) over-corrected: it changed the caret fill from `currentColor` (the panel's dark text colour — long-standing, visible) to the panel background, aiming for a "seamless extension". On a light-on-light tooltip that makes the caret INVISIBLE — the panel reads only because of its box-shadow, which the separate caret element doesn't share. The user had a visible caret before; the "correct" colour regressed it. Revert the polygon/path colour rules (caret returns to `currentColor` = visible) and keep ONLY the `display: block` on the SVG — that was the fix that mattered: it removes the ~21px of inline-baseline phantom height that both misaligned the caret and, because the positioner adds the measured arrow height to the gap, pushed the panel too far from the trigger. So: caret visible again + panel sits at the correct ~13px gap. A properly matched-and-visible caret (bg fill + its own drop-shadow) is deferred until it can be verified. Co-Authored-By: Claude Opus 4.8 --- src/uix/eidos/components/tooltip/tooltip.css | 40 ++++++-------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/src/uix/eidos/components/tooltip/tooltip.css b/src/uix/eidos/components/tooltip/tooltip.css index 40b3ae9d5..34004cb0d 100644 --- a/src/uix/eidos/components/tooltip/tooltip.css +++ b/src/uix/eidos/components/tooltip/tooltip.css @@ -75,40 +75,22 @@ /* ── Arrow ──────────────────────────────────────────────────────────────── */ -/* Colour the SVG shapes directly. The polygon/path carry `fill="currentColor"` / - * `stroke="currentColor"` presentation attributes, which a `fill`/`stroke` set on - * the wrapping does NOT override — an element's own presentation attribute - * beats an inherited value, so the caret rendered with `color` (dark text) instead - * of the panel bg. Target the polygon (body) + path (the two exposed edges) like - * the popover recipe. `display: block` keeps the SVG off the text baseline (which - * added phantom height + misaligned the caret). */ +/* `display: block` keeps the SVG off the text baseline. Inline added ~21px of + * phantom height, which both misaligned the caret AND — since the positioner adds + * the measured arrow height to the gap (`offset = sideOffset + arrowHeight`) — + * pushed the panel too far from the trigger. This is the fix that mattered. + * + * The caret colour is left as `currentColor` (the panel's dark text colour), the + * long-standing behaviour: it reads against the page. Matching the caret to the + * panel bg is technically "correct" (a seamless extension) but makes it INVISIBLE + * on a light-on-light tooltip — the panel is defined by its box-shadow, which the + * separate caret element doesn't share. A properly matched-and-visible caret needs + * its own drop-shadow; deferred until that can be verified. */ [data-tooltip-arrow] svg { display: block; overflow: visible; } -[data-tooltip-arrow] polygon { - fill: var(--_tooltip-bg, var(--tooltip-bg)); - stroke: none; -} - -[data-tooltip-arrow] path { - stroke: var(--_tooltip-border, var(--tooltip-border)); - stroke-width: var(--tooltip-border-width); - vector-effect: non-scaling-stroke; -} - -/* Outline variant: transparent bg → fill the arrow with the surface (masks the - * panel-border seam) and stroke the two exposed edges. */ -[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] polygon, -[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] polygon { - fill: var(--color-surface-default); -} -[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow] path, -[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] path { - stroke: var(--color-border-strong); -} - /* ── Entrance / exit ───────────────────────────────────────────────────────── * Tooltip morfo's data-state values: 'closed' | 'delayed-open' | 'instant-open'. * 'delayed-open' (hover) scales in subtly; 'instant-open' (keyboard focus)