/* Varial — Light card-style popover tooltips */ /* ── Tooltip container ────────────────────────────── */ /* Usage: the parent element MUST have position: relative (or another positioning context) so the tooltip anchors correctly. Example: */ .vrl-tooltip { position: absolute; z-index: 1050; max-width: 320px; padding: 0.625rem 0.875rem; background: var(--varial-card-bg, #fff); border: 1px solid var(--varial-border, #E8E4D8); border-radius: var(--varial-radius-md, 0.375rem); box-shadow: var(--varial-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07)); font-size: var(--text-sm, 0.875rem); line-height: 1.5; color: var(--varial-gray-800, #211F1C); } /* ── Arrow (CSS triangle pointing down by default) ── */ .vrl-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 1rem; width: 10px; height: 10px; background: var(--varial-card-bg, #fff); border-right: 1px solid var(--varial-border, #E8E4D8); border-bottom: 1px solid var(--varial-border, #E8E4D8); transform: rotate(45deg); } /* ── Trigger button (? icon) ─────────────────────── */ .vrl-tooltip-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--varial-gray-300, #CCC9C3); background: transparent; color: var(--varial-gray-500, #6B6763); font-size: 0.6875rem; font-weight: 600; cursor: help; vertical-align: middle; margin-left: 0.25rem; transition: border-color 150ms ease, color 150ms ease; } .vrl-tooltip-trigger:hover { border-color: var(--varial-primary-light, #2748C8); color: var(--varial-primary, #1B3AA0); } a.vrl-tooltip-trigger { text-decoration: none; } /* ── Dark mode ────────────────────────────────────── */ [data-bs-theme="dark"] .vrl-tooltip { background: var(--varial-card-bg, #1E293B); border-color: var(--varial-border, #334155); color: var(--varial-gray-500, #CBD5E1); } [data-bs-theme="dark"] .vrl-tooltip::after { background: var(--varial-card-bg, #1E293B); border-color: var(--varial-border, #334155); } /* ── Tabulator header / cell tooltips ────────────────────────────── Tabulator (the Revert market table, the Spot wizard readonly tables) appends its `headerTooltip` / `tooltip` popups to , outside `.tabulator`, and the vendor CSS gives them no background or text colour. They therefore inherit the page text colour over a light popup surface: fine in light mode, but invisible in dark mode (light text on a light box). Pin the same card treatment as .vrl-tooltip above so they read in both themes. #3965. */ .tabulator-popup.tabulator-tooltip { background: var(--varial-card-bg, #fff); border: 1px solid var(--varial-border, #E8E4D8); border-radius: var(--varial-radius-md, 0.375rem); box-shadow: var(--varial-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07)); color: var(--varial-gray-800, #211F1C); } [data-bs-theme="dark"] .tabulator-popup.tabulator-tooltip { background: var(--varial-card-bg, #1E293B); border-color: var(--varial-border, #334155); color: var(--varial-gray-200, #E2E8F0); }