Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here.
My current focus is on incorporating basic styled tooltips that will show associated sentences when hovered over. I've managed to bind their positions relative to the cursor's coordinates.
Here's the JavaScript code snippet I'm working with:
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";
}
While this setup works perfectly fine when loaded through codepen or locally, I've run into an issue when trying to implement it on Wordpress. The tooltip gets pushed far to the right and I'm struggling to identify the cause. Could there be a problem with the code itself, or is this more of an internal WordPress issue?