/* Tooltip enriquecido por CSS puro (InsTooltip.razor). Sin interop ni popover de MudBlazor → inmune al "doble render"/fantasma en (0,0) que MudTooltip sufre sobre Blazor Server con latencia. Posicionado por el navegador. Servido como static web asset del RCL: _content/InsCore.Ui.Gadgets/insTooltip.css (enlazado una vez en el de cada host). */ .ins-tt { position: relative; display: inline-flex; } .ins-tt__bubble { position: absolute; z-index: 19000; /* sobre diálogos/popovers de MudBlazor, bajo el modal de reconexión (20000) */ pointer-events: none; /* el tooltip nunca intercepta el ratón */ opacity: 0; visibility: hidden; width: max-content; max-width: min(320px, 90vw); padding: 0.35rem 0.55rem; border-radius: 6px; background: #20262e; /* gris oscuro, como el tooltip de MudBlazor */ color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease; } /* Colocación + micro-desplazamiento de entrada (se neutraliza al mostrar). */ .ins-tt--top .ins-tt__bubble { bottom: 100%; left: 50%; margin-bottom: 6px; transform: translate(-50%, 3px); } .ins-tt--bottom .ins-tt__bubble { top: 100%; left: 50%; margin-top: 6px; transform: translate(-50%, -3px); } .ins-tt--left .ins-tt__bubble { right: 100%; top: 50%; margin-right: 6px; transform: translate(3px, -50%); } .ins-tt--right .ins-tt__bubble { left: 100%; top: 50%; margin-left: 6px; transform: translate(-3px, -50%); } /* Mostrar en hover y foco (accesible por teclado). Pequeño retardo como un tooltip real. */ .ins-tt--top:hover .ins-tt__bubble, .ins-tt--top:focus-within .ins-tt__bubble, .ins-tt--bottom:hover .ins-tt__bubble, .ins-tt--bottom:focus-within .ins-tt__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0.3s; } .ins-tt--left:hover .ins-tt__bubble, .ins-tt--left:focus-within .ins-tt__bubble, .ins-tt--right:hover .ins-tt__bubble, .ins-tt--right:focus-within .ins-tt__bubble { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { .ins-tt__bubble { transition: none; } }