Básicamente, tengo problemas para mostrar información sobre herramientas dentro de un elemento <td> que tiene la propiedad overflow hidden . La clase de texto de información sobre herramientas aparecerá al pasar el mouse sobre ella, pero se cortará debido al overflow hidden . El padre (div) debe tener la posición relative y el hijo (información sobre herramientas) debe tener la posición absolute , esto se debe a que debe ser dinámico, ya que cada td debe tener su propia información sobre herramientas (aparece junto a él). Para tu información, el texto se rellena a través de una cadena json).
He visto muchos ejemplos en línea, pero no creo que incluyan una solución <td> con desbordamiento oculto e información sobre herramientas .
Cualquier ayuda será genial, gracias.
Tengo esta estructura html/css:
.advice-given-class { position: relative; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .advice-given-class .tooltiptext { z-index: 10; display: none; padding: 14px 20px; bottom: 20px; left: 0; width: 240px; line-height: 16px; position: absolute; } .advice-given-class:hover .tooltiptext { display: inline; color: #ffffff; border: 1px solid #DCA; background: #444; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } .tooltiptext:after { position: absolute; display: block; content: ""; border-style: solid; border-width: 8px; height: 0; width: 0; border-color: #444 transparent transparent transparent; bottom: -16px; left: 14px; } <td> <div class="advice-given-class"> texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext <span class="tooltiptext"> text from json string </span> </div> </td>puedes usar
position: fixed; para romper la regla de desbordamientomargin-top : negative height of element para subir la información sobre herramientas sobre el elemento #bigarea { height: 120px; } table { border: solid 1px black; } .advice-given-class { position: relative; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .advice-given-class .tooltiptext { z-index: 10; display: none; padding: 14px 20px; width: 240px; line-height: 16px; position: fixed; margin-top: -50px; left: 15px; } .advice-given-class:hover .tooltiptext { display: inline; color: #ffffff; border: 1px solid #DCA; background: #444; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } .tooltiptext:after { position: absolute; display: block; content: ""; border-style: solid; border-width: 8px; height: 0; width: 0; border-color: #444 transparent transparent transparent; bottom: -16px; left: 14px; } <div id="bigarea"></div> <table> <td> <div class="advice-given-class"> texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext <span class="tooltiptext"> text from json string </span> </div> </td> </table>