Tengo una pregunta sobre la información sobre herramientas que he usado de w3schools.com
Lo tengo completamente en CSS, pero tengo el problema de que cuando se muestra en el borde de un lado, corta la información sobre herramientas.
Lo ideal sería que detecte cuando el lado se detiene y hace que el div dado sea más alto, no más ancho.
.tooltip { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 20px; color: darkslategrey; } .tooltip .tooltiptext { visibility: hidden; width: 260px; background-color: darkslategrey; color: #fff; text-align: center; border-radius: 6px; padding: 16px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; position: absolute; z-index: 1; font-size: 16px; } .tooltip:hover .tooltiptext { visibility: visible; } .tooltiptext { text-shadow:none; } .tooltip .tooltiptext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: darkslategrey transparent transparent transparent; } <span class="tooltip">The highlighted word<span class="tooltiptext">The text in my tooltip</span></span>Gracias por cualquier tipo de ayuda, por donde podría empezar.