New to Js I am building an interactive pronunciation guide through an inline svg.

You can view it here: https://codepen.io/r-pg/pen/OJgoXWQ

I am currently trying to add basic styled tooltips which will display an associated sentence. I have bound its coordinates relative to the cursor position.

The js I am using for this is here:

function tooldef() {
  let t1 = document.querySelector('text[data-tooltip]');
  let t2 = document.querySelector('text:nth-of-type(2)');

  t1.addEventListener('onmousemove', showToolTip(evt));
  t2.addEventListener('onmousemove', showToolTip(evt));
}

function showToolTip(evt) {
  let t = evt.currentTarget;
  let phrase = t.getAttribute('data-tooltip');

  document.getElementById('tooltip').innerHTML = phrase;
  tooltip.style.display = "block";

  tooltip.style.left = evt.offsetX + 0 + 'px';
  tooltip.style.top = evt.offsetY + 0 + 'px';
  /* console.log(tooltip);*/
  console.log(evt.offsetX);
  console.log(evt.offsetY);
}

function hideToolTip(evt) {
  tooltip.style.display = "none";
}

This functions perfectly fine when loaded in through codepen or locally however when I apply this to Wordpress it pushes the tooltip far to the right ad I cannot Identify why. Is there an issue with the code or is this an internal problem within WP?