From 4afadfd79f69e3523e5888a0ea1402bf437bcce7 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Wed, 1 Jul 2026 13:30:10 +0200
Subject: [PATCH] fix(tooltip): arrow caret rendered dark + misaligned
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tooltip arrow SVG carries `fill="currentColor"` / `stroke="currentColor"`
presentation attributes, so setting `fill`/`stroke` on the wrapping `<span>`
(`[data-tooltip-arrow] { fill: … }`) never reached the shapes — an element's own
presentation attribute beats an inherited value. The caret therefore painted with
`color` (the dark text colour) instead of the panel background, and the `<svg>` was
left `display: inline`, adding phantom baseline height (26px box for a 5px caret)
that misaligned it. Net effect: the caret didn't read as a caret.

Fix mirrors the popover recipe: colour the `polygon` (fill = panel bg) + `path`
(stroke = panel border) directly, and set the `<svg>` to `display: block`. The
tooltip caret is now byte-identical in treatment to the popover's (fill = content
bg, 1px border-coloured edge). Also fixes the outline variant, which had the same
span-vs-shape mistake.

Pre-existing bug, unrelated to the avoidCollisions:'flip' rollout. Verified in a
real browser: polygon fill now equals the content background, svg is block, caret
positioned correctly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/uix/eidos/components/tooltip/tooltip.css | 32 +++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/uix/eidos/components/tooltip/tooltip.css b/src/uix/eidos/components/tooltip/tooltip.css
index 81d132649..40b3ae9d5 100644
--- a/src/uix/eidos/components/tooltip/tooltip.css
+++ b/src/uix/eidos/components/tooltip/tooltip.css
@@ -75,16 +75,38 @@
 
 /* ── Arrow ──────────────────────────────────────────────────────────────── */
 
-[data-tooltip-arrow] {
+/* Colour the SVG shapes directly. The polygon/path carry `fill="currentColor"` /
+ * `stroke="currentColor"` presentation attributes, which a `fill`/`stroke` set on
+ * the wrapping <span> 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). */
+[data-tooltip-arrow] svg {
+	display: block;
+	overflow: visible;
+}
+
+[data-tooltip-arrow] polygon {
 	fill: var(--_tooltip-bg, var(--tooltip-bg));
+	stroke: none;
 }
 
-/* Outline variant: arrow needs a stroke since the bg is transparent. */
-[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow],
-[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] {
+[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);
-	stroke-width: 1px;
 }
 
 /* ── Entrance / exit ─────────────────────────────────────────────────────────