inline SVG自定义样式tooltip接入Wordpress后位置偏移问题求助

问题原因 #

1. 代码本身存在的错误 #

• 事件绑定写法错误：addEventListener的事件名不需要加on前缀，正确事件名是mousemove，不是onmousemove；同时你直接写showToolTip(evt)会在绑定时立即执行函数，而不是触发事件时执行，正确写法是传入函数引用。
• 坐标基准选择错误：offsetX是光标相对于触发事件的SVG text元素的坐标，你的tooltip定位基准如果和text元素的定位基准不一致，就会出现偏移。你在本地和Codepen里刚好tooltip的定位父级是body、和text元素基准一致所以正常，WordPress环境下父级布局变化就会偏移。

2. WordPress环境的影响 #

• 主题或插件自带的样式可能给tooltip的父容器添加了position: relative属性，改变了tooltip的绝对定位基准。
• WordPress的响应式布局可能对SVG做了缩放处理，SVG内部的坐标和页面实际像素比例不是1:1，导致offsetX获取的数值和页面实际像素不匹配。
• 部分WordPress主题会默认给内容区域加固定padding/margin，也会干扰绝对定位元素的坐标计算。

修复方案 #

1. 修正事件绑定代码：

function tooldef() {
  let t1 = document.querySelector('text[data-tooltip]');
  let t2 = document.querySelector('text:nth-of-type(2)');
  // 修正事件名和函数引用写法，同时补全mouseout事件绑定用来隐藏tooltip
  t1.addEventListener('mousemove', showToolTip);
  t1.addEventListener('mouseout', hideToolTip);
  t2.addEventListener('mousemove', showToolTip);
  t2.addEventListener('mouseout', hideToolTip);
}
// 确保DOM加载完成后再执行初始化
document.addEventListener('DOMContentLoaded', tooldef);

2. 修改坐标计算逻辑，改用页面全局坐标：
   首先给tooltip设置position: fixed的CSS，避免父元素定位影响，然后修改坐标赋值部分：

function showToolTip(evt) {
  let t = evt.currentTarget;
  let phrase = t.getAttribute('data-tooltip');
  const tooltip = document.getElementById('tooltip'); // 补全变量声明，避免全局变量污染
  tooltip.innerHTML = phrase;
  tooltip.style.display = "block";
  // 用clientX/clientY，基于视口计算坐标，加10px偏移避免光标挡住tooltip
  tooltip.style.left = evt.clientX + 10 + 'px';
  tooltip.style.top = evt.clientY + 10 + 'px';
}

3. 给tooltip加优先级更高的CSS，避免主题样式覆盖：

#tooltip {
  position: fixed !important;
  z-index: 99999 !important; /* 确保在最上层 */
  margin: 0 !important;
  padding: 6px 10px !important;
  /* 其他自定义样式 */
}

内容的提问来源于stack exchange，提问作者Raphael Palma Gil