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 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 ─────────────────────────────────────────────────────────