/* Shared truncated-text tooltip, used by both the Admin panel and the public site (see assets/js/tooltip.js). A single floating element appended to and positioned via JS against the viewport -- not a pure-CSS ::after popup anchored to the trigger -- so it is never clipped by an ancestor's overflow (e.g. Bootstrap 3's .table-responsive, which always sets overflow-y:hidden) and always has a controlled, on-top z-index instead of fighting the page's own stacking contexts. */ .js-tooltip { border-bottom: 1px dotted rgba(0, 0, 0, 0.3); cursor: help; } .app-tooltip-popup { position: absolute; z-index: 4000; max-width: 300px; padding: 9px 13px; border-radius: 8px; background: #14181f; color: #fff; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12.5px; font-weight: 400; line-height: 1.55; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; } .app-tooltip-popup.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .app-tooltip-arrow { position: absolute; z-index: 4000; width: 0; height: 0; border: 6px solid transparent; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s; pointer-events: none; } .app-tooltip-arrow.is-visible { opacity: 1; visibility: visible; } .app-tooltip-arrow.is-above { border-top-color: #14181f; } .app-tooltip-arrow.is-below { border-bottom-color: #14181f; } @media (max-width: 600px) { .app-tooltip-popup { max-width: 220px; } }