Tengo estos tres íconos, podrían ser más, con información sobre herramientas que tienen la position: absolute; y toda la parte del icono se alinea a la derecha. Al pasar el cursor sobre el icono, aparece una información sobre herramientas y, en el caso del texto breve, se ve bien. Sin embargo, hay un problema, especialmente con la última información sobre herramientas, si hay un texto más largo.
Se desborda a la derecha o simplemente aparece de mala manera, y lo que estoy tratando de lograr es que cuando hay un texto largo, la información sobre herramientas debe cambiar la posición de alguna manera hacia la izquierda, por lo que es completamente visible ... Sería sería genial si esto pudiera hacerse solo en CSS, pero cualquier solución funcional sería genial. Gracias por cualquier consejo.
.container { background: darkgrey; padding: 20px 20px 50px; display: flex; width: 400px; justify-content: flex-end; } .icon { font-size: 20px; color: white; margin-right: 20px; position: relative; display: flex; justify-content: center; } .container .icon:hover .tooltip { visibility: visible; } .tooltip { color: #fff; position: absolute; visibility: hidden; font-size: 12px; top: 30px; min-width: 200px; text-align: center; } <div class="container"> <a href="#/" class="icon">ICON <span class="tooltip">text1</span></a> <a href="#/" class="icon">ICON <span class="tooltip">a bit longer tooltip text</span></a> <a href="#/" class="icon">ICON <span class="tooltip">very long tooltip text goes here, and it should not overflow to the side</span></a> </div>Creo que puedes usar element.scrollWidth | element.clientWidth y element.getBoundingClientRect() para calcular si la información sobre herramientas sale de la ventana pero hago muchos cálculos para un problema simple
Tal vez pueda simplemente crear una información sobre herramientas de clase a la izquierda donde los elementos se mueven a la derecha:
.container { background: darkgrey; padding: 20px 20px 50px; display: flex; width: 400px; justify-content: flex-end; } .icon { font-size: 20px; color: white; margin-right: 20px; position: relative; display: flex; justify-content: center; } .container .icon:hover .tooltip { visibility: visible; } .tooltip { color: #fff; position: absolute; visibility: hidden; font-size: 12px; top: 30px; min-width: 200px; text-align: center; } .tooltip-left { right:25%; text-align: right; } <div class="container"> <a href="#/" class="icon">ICON <span class="tooltip">text1</span></a> <a href="#/" class="icon">ICON <span class="tooltip">a bit longer tooltip text</span></a> <a href="#/" class="icon">ICON <span class="tooltip tooltip-left">very long tooltip text goes here, and it should not overflow to the side</span></a> </div>