多行title属性引发mouseleave事件误触发的问题及修复咨询

在项目开发中发现，当元素的title属性为多行时，鼠标悬停到title提示框上会触发mouseleave事件。想知道这是不是已知问题，以及修复方法。

问题复现示例 #

HTML代码 #

<div>
  <p>MouseLeave Count:
    <span id="count">0</span>
  </p>
  <em> (hover inside box below, hold for tooltip, then hover over tooltip)</em>
  <p id="test" onmouseleave="test(this)" title="This is a 
multi line title"></p>
</div>

CSS代码 #

#test {
  width: 100vw;
  height: 40vh;
  border: 1px solid;
}

JS代码 #

let count = 0;

function test(x) {
  count++
  document.getElementById("count").innerText = count;
}

浏览器表现差异 #

出现问题的浏览器 #

• Microsoft Edge Version 114.0.1823.43（正式版，64位）
• Chrome Version 112.0.5615.138（正式版，64位）

表现正常的浏览器 #

• Firefox 114.0.1（64位）

问题说明与修复方案 #

这是Chromium内核浏览器（Chrome、Edge均基于此）的已知行为，并非Bug。原因是Chromium将原生title提示框视为独立于原元素的内容，当鼠标移到提示框上时，会判定鼠标已离开原元素，进而触发mouseleave事件；而Firefox则把title提示框当作原元素的延伸，不会触发该事件。

修复方案1：避免使用多行原生title #

直接将多行title的换行移除，改为单行文本，或者用空格、短横线等符号分隔内容。这样title提示框不会换行，鼠标悬停时就不会触发mouseleave。

修改后的title属性示例：

<p id="test" onmouseleave="test(this)" title="This is a multi line title"></p>

修复方案2：自定义tooltip替代原生title #

如果必须保留多行提示内容，推荐使用自定义tooltip组件完全替代原生title，这样可以自主控制提示框的行为，消除浏览器差异。

以下是简单的自定义tooltip实现：

<div>
  <p>MouseLeave Count:
    <span id="count">0</span>
  </p>
  <em> (hover inside box below, hold for tooltip, then hover over tooltip)</em>
  <p id="test" onmouseleave="test(this)" data-tooltip="This is a
multi line title"></p>
</div>

<style>
#test {
  width: 100vw;
  height: 40vh;
  border: 1px solid;
  position: relative;
}

.custom-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-line;
  z-index: 100;
}
</style>

<script>
let count = 0;
const testEl = document.getElementById('test');

function test(x) {
  count++
  document.getElementById("count").innerText = count;
}

// 自定义tooltip逻辑
testEl.addEventListener('mouseenter', () => {
  const tooltipText = testEl.dataset.tooltip;
  const tooltip = document.createElement('div');
  tooltip.className = 'custom-tooltip';
  tooltip.textContent = tooltipText;
  testEl.appendChild(tooltip);
});

testEl.addEventListener('mouseleave', (e) => {
  const tooltip = testEl.querySelector('.custom-tooltip');
  // 仅当鼠标真正离开元素（未悬停在tooltip上）时触发原逻辑
  if (tooltip && !tooltip.contains(e.relatedTarget)) {
    test(testEl);
    tooltip.remove();
  }
});
</script>

这个自定义tooltip会在鼠标离开原元素且未悬停在提示框上时，才触发原本的mouseleave逻辑，同时完美支持多行内容，在所有主流浏览器中表现一致。

内容的提问来源于stack exchange，提问作者Gangula