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:

https://jsfiddle.net/hp695abc/12/

CodePudding user response：

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:

1. Introduce CSS custom properties that control the position.
2. Dynamically adjust the values of those properties in your Javascript code.

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>