Chrome浏览器中Tooltip错误显示在非目标元素上

问题现象 #

在Chrome浏览器中，SVG内部的<title>标签文本（"Google Logo"）错误地显示在页面图片的Tooltip上，而该title本应仅在hover SVG元素时才会触发显示。此问题仅在Chrome中可复现，其他浏览器无此异常。

复现步骤 #

• 使用下方代码在Chrome中打开网页（非全屏模式）
• 点击页面中的SVG链接，在新窗口打开目标页面
• 关闭新打开的窗口
• 立即将光标移至页面图片上
• 1-5秒后，图片上会显示内容为“Google Logo”的Tooltip

复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img style="width: min(100%, 800px);" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt="Nature Image">
    <div>
        <a href="https://google.com">
            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
                <title>Google Logo</title>
                <path fill="#fbc02d" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12   s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20    s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#e53935" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039   l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4caf50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36 c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1565c0" d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571   c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
            </svg>
        </a>
    </div>
</body>
</html>

问题原因分析 #

这是Chrome浏览器的一个特定场景Bug，触发逻辑和窗口焦点切换后的hover事件追踪有关：

1. 点击SVG链接打开新窗口时，Chrome可能未正确清除SVG元素的hover状态关联
2. 关闭新窗口、焦点回到原页面后，Chrome的Tooltip渲染逻辑出现错误，将原本属于SVG的<title>内容错误绑定到了光标当前hover的图片元素上
3. 其他浏览器的Tooltip事件追踪逻辑未出现此异常，进一步验证这是Chrome独有的实现缺陷

临时规避方案可尝试：

• 给SVG元素添加pointer-events: none（若无需交互），或在链接点击后重置SVG的hover状态
• 为图片添加空的<title>标签，覆盖错误的Tooltip内容

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