How to move tooltip on mouse move using javascript-CodePudding

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 >
  <div >
    <div >
      <img src="pic.png" />
    </div>
    <section >this is tooltip</section>
  </div>
  <div >
    <div ></div>
    <section >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 .

CodePudding user response：

You've used querySelector() method to access the DOM element. This method is used to access single element.

querySelectorAll() method is used to access all elements which matches the CSS query. querySelectorAll() method returns a NodeList.

In this Snippet below forEach loop is used. Since NodeList selected by querySelectorAll() has an array-like structure so you can directly apply forEach method with it and pass element as the first element in the callback function

let tooltips = document.querySelectorAll('.toolhere   section');

document.addEventListener("mousemove", function(e) {
  const posX = `${e.clientX   3}px`;
  const posY = `${e.clientY   3}px`;

   tooltips.forEach((tooltip) => {
    tooltip.style.top = posY;
    tooltip.style.left = posX;
  });
});

.toolhere {
  position: relative;
}

.toolhere section {
  opacity: 0;
  width: fit-content;
  position: fixed;
  font-family: sans-serif;
  background-color: #ECECEC;
  color: #4D4E53;
  border-radius: 5px;
  padding: 4px 8px 4px 9px;
  font-size: 12px;
  transition: opacity .5s;
}

.toolhere:hover section {
  opacity: 1;
}

<div >
  <div >
    <div >
      <img src="https://media.istockphoto.com/photos/positive-man-celebrating-success-picture-id1221837116?k=20&m=1221837116&s=612x612&w=0&h=HfTeaCWySduic6zF3kC-jGjWq_JgQUc5BtBjdCzBQzU=" />
    </div>
    <section >this is tooltip</section>
  </div>
  <div >
    <div ></div>
    <section >this is tooltip</section>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <img src="pic.png"/>
    </div>
    <section >this is tooltip</section>
  </div>
  <div >
    <div ></div>
    <section >this is tooltip</section>
  </div>
</div>