Tengo un elemento que muestra información sobre herramientas cuando se pasa el cursor por encima, pero cuando el elemento está en el borde de la pantalla, la información sobre herramientas se corta en lugar de moverse para permanecer en el div.

El contenedor div ya tiene una position: relative , eso no es lo que estoy buscando. Quiero que la información sobre herramientas siga donde sea que esté el elemento de la imagen, pero que no se mueva más allá del borde de la pantalla.

Cómo se ve (recorte de información sobre herramientas)

como quiero que se vea

Aquí hay algo de mi código:

 <div class="image"> <img src="/images/image_name.png" style="left: 100%"> <span class="tooltiptext">Marker</span> </div>

 .image { position: absolute; width: 13px; height: 13px; user-select: none; pointer-events: auto; transform: translateX(-50%); } .image .tooltiptext { visibility: hidden; opacity: 0; transition: opacity 300ms; min-width: 90px; background-color: #000000e0; color: white; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 2; bottom: 100%; left: 50%; transform: translate(-90%, -5px); } .image:hover .tooltiptext { visibility: visible; opacity: 1; }

¡Déjame saber si hay una manera de arreglar esto! ¡Gracias!