Necesito implementar una información sobre herramientas dinámica que se mueve automáticamente cuando está fuera de la pantalla, así como su flecha, según la posición de la etiqueta. Sin embargo, encuentro dificultades para hacer esto ya que el ancho de la información sobre herramientas cambia según su contenido. Cualquier ayuda será apreciada. ¡Gracias!

Escenario 1:

Escenario 2:

HTML:

 <th *ngFor="let field of columnFields"> <a class="column-label"> <div class="custom-tooltip"> <div class="tooltip__initiator">{{field.name}}</div> <div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div> </div> </a> </th>

ESTILO:

 .custom-tooltip { position: relative; } .tooltip__initiator { cursor: pointer; z-index: 5; } .tooltip__item { font-family: "ABeeZee"; font-size: 13px; line-height: 18px; position: absolute; position: absolute; min-width: 132px; max-width: 320px; text-align: center; padding: 12px; visibility: hidden; opacity: 0; color: white; border: 1px solid #cecece; border-radius: 3px; font-weight: 500; z-index: 6; background: blue; border: 1px solid blue; border-radius: 8px; white-space: break-spaces; inline-size: max-content; top: calc(70% + 1em); } .tooltip__item:after { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; } .custom-tooltip .tooltip__initiator:hover ~ .tooltip__item { left: 50%; visibility: visible; opacity: 1; } .custom-tooltip .tooltip__item:after { left: 50%; top: -0.5em; border-width: 0 1em 0.6em 1em; border-color: transparent transparent blue transparent; border-radius: 8px; }