/* ========================================================================== QuickCode (qcd.es) — TOOLTIPS Archivo: css/tooltip.css Sustituye los tooltips nativos del navegador (atributo `title`) por uno con el estilo de la UI. El markup lo inyecta js/tooltip.js: un ÚNICO elemento colgado del y posicionado con JS. Por qué en el y no un ::after sobre el propio elemento: los iconos de acción viven dentro de `.qcd-table-wrap`, que es `overflow-x:auto`. Un pseudo-elemento quedaría recortado por ese contenedor. Colgándolo del body con position:fixed, el scroll horizontal de la tabla no lo afecta. ========================================================================== */ .qcd-tooltip { position: fixed; z-index: 900; top: 0; left: 0; max-width: 260px; padding: 7px 11px; background: var(--qcd-txt, #1d1d1f); color: #fff; border-radius: var(--qcd-radius-sm, 8px); box-shadow: 0 6px 20px rgba(20, 25, 22, 0.22); font-family: var(--qcd-font); font-size: 0.8rem; font-weight: 500; line-height: 1.4; text-align: center; white-space: normal; /* No debe interceptar el ratón: el hover es del elemento de debajo. */ pointer-events: none; opacity: 0; visibility: hidden; transform: translate3d(0, var(--qcd-tip-rise, 4px), 0) scale(0.97); transform-origin: center bottom; transition: opacity 0.14s ease-out, transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.14s; } /* Cuando el tooltip se coloca ENCIMA del elemento, el "nacimiento" es desde abajo; cuando se coloca debajo, desde arriba. Lo marca el JS. */ .qcd-tooltip--below { transform: translate3d(0, calc(var(--qcd-tip-rise, 4px) * -1), 0) scale(0.97); transform-origin: center top; } .qcd-tooltip.is-visible { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); transition: opacity 0.16s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } /* Piquito */ .qcd-tooltip::after { content: ''; position: absolute; left: var(--qcd-tip-arrow, 50%); margin-left: -5px; border: 5px solid transparent; } .qcd-tooltip:not(.qcd-tooltip--below)::after { top: 100%; border-top-color: var(--qcd-txt, #1d1d1f); } .qcd-tooltip--below::after { bottom: 100%; border-bottom-color: var(--qcd-txt, #1d1d1f); } /* Acento: para tooltips de acciones destacadas (data-tip-accent) */ .qcd-tooltip--accent { background: var(--qcd-accent, #00A878); } .qcd-tooltip--accent:not(.qcd-tooltip--below)::after { border-top-color: var(--qcd-accent, #00A878); } .qcd-tooltip--accent.qcd-tooltip--below::after { border-bottom-color: var(--qcd-accent, #00A878); } /* Sin movimiento para quien lo pide: aparece y desaparece, sin desplazamiento. */ @media (prefers-reduced-motion: reduce) { .qcd-tooltip, .qcd-tooltip.is-visible { transform: none; transition: opacity 0.01s linear, visibility 0s; } }