/* ============================================================================= OptionFinder — Zentrales Tooltip-System (Popup-Mechanik) ----------------------------------------------------------------------------- Farbe/Text/Breite/Padding kommen ZENTRAL aus dem Theme-Design-System (themes/optionfinder-theme/style.css: --of-tooltip-bg / -text / -max-width / -padding). NICHT hier duplizieren — sonst Kollision (das war der Bug). Hier stehen nur (a) die Tokens, die das Theme NICHT hat, und (b) das eine position:fixed-Popup, das of-tooltip.js an haengt und das jeden overflow:hidden/auto-Container (Modals) verlaesst. Verwendung: Element mit data-of-tip="Text" versehen. ============================================================================= */ :root { /* Nur Ergaenzungen zum Theme-Token-Set. */ --of-tooltip-radius: 8px; --of-tooltip-shadow: 0 8px 28px rgba(76, 29, 149, 0.35); --of-tooltip-z: 2147483647; /* max — muss ueber jedem Modal (z.B. 99999) liegen */ } /* Das (einzige) Popup-Element. EIGENER Klassenname .of-tip-bubble — NICHT .of-tooltip, denn das Theme belegt .of-tooltip bereits als eigene Wrapper-Komponente (position:relative) und wuerde mein position:fixed ueberschreiben (war der Bug). Farbe/Groesse aus den Theme-Tokens (Fallbacks fuer den Fall, dass das Theme mal nicht geladen ist). */ .of-tip-bubble { position: fixed; top: 0; left: 0; z-index: var(--of-tooltip-z); max-width: var(--of-tooltip-max-width, 250px); padding: var(--of-tooltip-padding, 9px 12px); background: var(--of-tooltip-bg, #6d28d9); color: var(--of-tooltip-text, #ffffff); border-radius: var(--of-tooltip-radius); box-shadow: var(--of-tooltip-shadow); font-size: var(--of-text-xs, 12px); line-height: 1.45; font-weight: 400; text-align: left; white-space: normal; word-break: break-word; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; } .of-tip-bubble.of-tip-bubble--on { opacity: 1; visibility: visible; } /* Optionaler zentraler Help-Icon (violetter ?-Kreis) — Farbe aus demselben Token. */ .of-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: var(--of-text-2xs, 11px); font-weight: 600; line-height: 1; background: transparent; border: 1px solid var(--of-tooltip-bg, #6d28d9); color: var(--of-tooltip-bg, #6d28d9); border-radius: 50%; cursor: help; vertical-align: middle; transition: all 0.15s ease; } .of-help-icon:hover { background: var(--of-tooltip-bg, #6d28d9); color: #fff; }