/** * BD-155 — Instant hover tooltips (see assets/js/ln_tooltips.js). * * One portal element lives at the end of , positioned with position:fixed, * so it is never clipped by a note card's overflow/transform/stacking context. * No transition on appearance: the tooltip must read as instant. The only * animation is a short fade-out, which cannot make hover feel sluggish. */ .ln-tip { position: fixed; z-index: 2147483000; /* above every canvas layer, popover, and modal */ top: 0; left: 0; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: #1f2937; color: #f9fafb; font-family: var(--ln-card-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; text-align: center; white-space: normal; overflow-wrap: break-word; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28); pointer-events: none; opacity: 0; } /* Instant on: no transition-in, so there is no perceptible ramp. */ .ln-tip.ln-tip--on { opacity: 1; } /* Prompt dismissal — short enough to feel immediate, not a lingering ghost. */ .ln-tip:not(.ln-tip--on) { transition: opacity 80ms ease-out; } /* Caret. Sits under the bubble by default, above it when flipped below. */ .ln-tip::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; background: inherit; transform: rotate(45deg); } .ln-tip.ln-tip--below::after { top: -3px; bottom: auto; } /* Suppress the CSS-only tooltips some icon strips ship, so a hovered icon can never show two bubbles at once. */ .ln-card-aff-btn[data-ln-tip]::before, .ln-card-aff-btn[data-ln-tip]::after, .ln-card-edit-tool[data-ln-tip]::before, .ln-card-edit-tool[data-ln-tip]::after { content: none; } @media (prefers-reduced-motion: reduce) { .ln-tip:not(.ln-tip--on) { transition: none; } } /* Touch devices have no hover; keep the portal fully out of the way. */ @media (hover: none) { .ln-tip { display: none; } }