When using plain JavaScript to create a function that moves a tooltip on mouse move, the function works the first time with clientX and clientY, but fails to work when repeated. What could be causing this issue with clientX and clientY? Any suggestions on how to fix this?
const tooltip2 = document.querySelectorAll('.content-section-text + section');
window.onmousemove = function(e) {
const x = (e.clientX + 5) + 'px',
y = (e.clientY + 5) + 'px';
for (var i = 0; i < tooltip2.length; i++) {
tooltip2[i].style.top = y;
tooltip2[i].style.left = x;
}
};.content-section-text {
position: relative;
cursor: default;
}
.content-section-text+section {
display: none !important;
background-color: #ECECEC;
color: #4D4E53;
font-size: 12px;
padding: 4px 8px 4px 9px;
}
.content-section-text:hover+section {
display: block !important;
position: fixed;
}<div class="left-content-section">
<div class="content-section-icon">
<img src="pic.png" />
</div>
<div class="content-section-text">N/A</div>
<section class="tooltiptext1">Name</section>
</div>