Llegué a un callejón sin salida al intentar crear una información sobre herramientas que siga al cursor cuando se pasa el cursor sobre un elemento de enlace. Dos problemas hasta ahora: la información sobre herramientas no muestra el contenido que se supone que debe mostrar, y el elemento de enlace desaparece al pasar el mouse por encima. He buscado por todas partes una posible solución, pero no encontré nada. este es el codigo:
var tooltips = document.querySelectorAll('[tooltip]'); window.onmousemove = function(e) { var x = (e.clientX + 20) + 'px', y = (e.clientY + 20) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; [tooltip]::before, [tooltip]::after { position: absolute; content: attr(tooltip); color: rgba(12, 12, 11, 0.5); background: rgb(168, 76, 243); padding: 0.5rem; width: max-content; border-radius: 0.4rem; font-size: 14px; font-weight: 800; text-align: center; display: none; } [tooltip]:hover { display: block; position: fixed; overflow: hidden; } <ul> <li><a href="example1.com" tooltip="discriptive1">Example 1 </a></li> <li><a href="example2.io" tooltip="discriptive2">Example 2 </a></li> <li><a href="example3.com" tooltip="discriptive3">Example 3 </a></li> <li><a href="example4.com" tooltip="Dev">Example 3 </a></li> <li><a href="example5.com" tooltip="Dev2">Example 4 </a></li> <li><a href="example6.com" tooltip="Dev3">Example 5 </a></li> </ul>Esta es una demostración del comportamiento:
a) Está moviendo los elementos host, no los pseudo elementos.
b) No puede acceder a pseudo elementos con Javascript.
c) Todos los atributos no estándar en HTML deben tener el prefijo data- , de lo contrario, terminará con HTML no válido (que es lo que tiene actualmente).
Esto es lo que puede hacer:
const tooltips = document.querySelectorAll('[data-tooltip]'); window.onmousemove = function(e) { var x = (e.clientX + 20) + 'px', y = (e.clientY + 20) + 'px'; for (let i = 0; i < tooltips.length; i++) { tooltips[i].style.setProperty('--tooltip-y', y); tooltips[i].style.setProperty('--tooltip-x', x); } }; [data-tooltip]::before { position: fixed; content: attr(data-tooltip); color: rgba(12, 12, 11, 0.5); background: rgb(168, 76, 243); padding: 0.5rem; width: max-content; border-radius: 0.4rem; font-size: 14px; font-weight: 800; text-align: center; display: none; overflow: hidden; } [data-tooltip]:hover::before { display: block; left: var(--tooltip-x); top: var(--tooltip-y); } <ul> <li><a href="example1.com" data-tooltip="descriptive 1">Example 1</a></li> <li><a href="example2.net" data-tooltip="descriptive 2">Example 2</a></li> <li><a href="example3.com" data-tooltip="descriptive 3">Example 3</a></li> <li><a href="example4.com" data-tooltip="Dev 1">Example 3</a></li> <li><a href="example5.com" data-tooltip="Dev 2">Example 4</a></li> <li><a href="example6.com" data-tooltip="Dev 3">Example 5</a></li> </ul>