I've reached a dead end trying to make a tool-tip that follows the cursor when hovering over a link element. Two problems so far: the tool-tip doesn't show the content it's supposed to, and the link element disappears on hover. I've looked everywhere for a possible fix but found nothing. this is the code:
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>This is a demo of the behavior:
a) You are moving the host elements, not the pseudo elements.
b) You cannot access pseudo elements with Javascript.
c) All non-standard attributes in HTML must be prefixed by data-, otherwise you end up with invalid HTML (which is what you currently have).
Here's what you can do:
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>