Trabajo con un sitio web que tiene un cuadro de texto enriquecido que brinda acceso directo al código HTML subyacente. Puedo editar el código HTML, pero cuando lo guardo, interviene el sitio web. Los elementos <style> desaparecen, pero los elementos <div> y <span> permanecen y parecen mantener todos sus atributos.
Me gustaría que cierto elemento <span> muestre una información sobre herramientas cuando se pasa el cursor sobre él. Consideré usar el atributo de title (funciona), pero no es lo suficientemente flexible para mi necesidad.
¿Es posible (y cómo) implementar una información sobre herramientas como la que se muestra aquí sin un elemento <style> , usando solo los atributos de los elementos <div> y <span> ? Estaba pensando en atributos como style , onmouseover y onmouseout , pero siéntete libre de sugerir otros que creas convenientes.
Entonces, suponiendo que no tiene forma de incluir css o js por separado en la carga de la página, se me ocurrió algo que funciona solo con html:
<!DOCTYPE html> <html> <body style="text-align:center;"> <h2>Top Tooltip w/ Bottom Arrow</h2> <div style="position: relative; display: inline-block; border-bottom: 1px dotted black;" onmouseover="tooltip.style.visibility='visible'" onmouseout="tooltip.style.visibility='hidden'">Hover over me <span id="tooltip" style="visibility: hidden;"> <span style="width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;">Tooltip text</span> <span style="content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;"></span> </span> </div>Con esto, puede simplemente agregar un atributo hovertip a cualquier elemento como <p hovertip="tip">hover this</p> .
var tooltip = document.getElementById("tooltip"); document.addEventListener("mousemove", (e) => { elementMouseIsOver = document.elementFromPoint(e.clientX, e.clientY); if (elementMouseIsOver !== null) { if (elementMouseIsOver.getAttribute("hovertip") == null) { tooltip.style.display = "none"; tooltip.innerText = ""; } else { tooltip.style.display = "block"; tooltip.innerText = elementMouseIsOver.getAttribute("hovertip"); }; }; tooltip.style.top = e.clientY + "px"; tooltip.style.left = e.clientX + "px"; }); #tooltip { border-radius: 5px; padding: 5px; background-color: darkslategray; opacity: 0.9; color: white; position: fixed; left: 0px; top: 0px; display: none; pointer-events: none; } <div id="tooltip"></div> <textarea hovertip="asdb"></textarea><br> <p>wqe qwej jiofdas jare oias. dgf <span hovertip="the tooltip" style="text-decoration: underline;">gfrsd</span> sfgd ho, sfdg sdfr ert asd.</p>