How to move tooltip on mouse move using javascript

July 6, 2022

const tooltip = document.querySelector('.toolhere + section');
window.onmousemove = function(e) {
  const x = (e.clientX + 3) + 'px',
    y = (e.clientY + 3) + 'px';
  for (var i = 0; i < tooltip.length; i++) {
    tooltip[i].style.top = y;
    tooltip[i].style.left = x;
  }
};

.toolhere {
  position: relative;
}

.toolhere+section {
  display: none !important;
  background-color: #ECECEC;
  color: #4D4E53;
  padding: 4px 8px 4px 9px;
  font-size: 12px;
}

.toolhere:hover+section {
  display: block !important;
  position: fixed;
}

<div class="items">
  <div class="sub-content">
    <div class="iconsize toolhere">
      <img src="pic.png" />
    </div>
    <section class="tooltip">this is tooltip</section>
  </div>
  <div class="sub-content">
    <div class="content-name toolhere"></div>
    <section class="tooltip">this is tooltip</section>
  </div>
</div>

I need some help here can anyone open to tell why its not working for me. Some kind of urgency. So what needs to be done or any changes needs to be done for the javascript. I’m able only hover the tooltip but tooltip doesn’t move on mouse move .

>Solution :

The return value of querySelector is not an array,
cannot be traversed

Please use querySelectorAll instead

const tooltip = document.querySelectorAll('.toolhere + section');
window.onmousemove = function(e) {
  const x = (e.clientX + 3) + 'px',
    y = (e.clientY + 3) + 'px';
  for (var i = 0; i < tooltip.length; i++) {
    tooltip[i].style.top = y;
    tooltip[i].style.left = x;
  }
};

.toolhere {
  position: relative;
}

.toolhere+section {
  display: none !important;
  background-color: #ECECEC;
  color: #4D4E53;
  padding: 4px 8px 4px 9px;
  font-size: 12px;
}

.toolhere:hover+section {
  display: block !important;
  position: fixed;
}

<div class="items">
  <div class="sub-content">
    <div class="iconsize toolhere">
      <img src="pic.png"/>
    </div>
    <section class="tooltip">this is tooltip</section>
  </div>
  <div class="sub-content">
    <div class="content-name toolhere"></div>
    <section class="tooltip">this is tooltip</section>
  </div>
</div>