Chromium SVG 悬停 <title> 工具提示怪异

Posted 2023-05-08

【中文标题】Chromium SVG 悬停 <title> 工具提示怪异

【英文标题】：Chromium SVG hover <title> tooltip weirdness

【发布时间】：2012-09-27 11:22:06

【问题描述】：

在许多浏览器中，将鼠标指针悬停在具有嵌套 <title> 的 SVG 对象上，标题文本将显示为工具提示。如果相邻对象具有相同的标题，我发现 Chrome 中会发生一些奇怪的事情：当您将鼠标从一个对象悬停到另一个对象时，工具提示不会重新显示。

这可以用下面的代码/小提琴来复制。在 IE 中，您会为每个对象获得一个全新的工具提示。

我该如何解决这个问题？我需要使用 Chromium，并且我需要相同的工具提示重新出现在相邻对象上。我真的不想进入（更多）脚本，除非它可以用 SVG 以超轻量级、可靠和完美的方式完成。

也许我可以在标题文本中嵌入一些不可见的东西，让 Chromium 认为每个对象的标题都不同？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0"   fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="100" y="0"   fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="0" y="100"   fill="yellow" stroke="black">
    <title>square</title>
</rect>
<rect x="100" y="100"   fill="yellow" stroke="black">
    <title>SQUARE</title>
</rect>
</svg>

http://jsfiddle.net/CvZfR/

【参考方案1】：

我找到了一种可行的方法：在标题文本中添加一些 ‌ 或 ‍。这些是零宽度的不可见字符。这些的不同组合使标题看起来与 Chromium 不同。

【参考方案2】：

我想这可能对您的需求有点沉重，而且您还必须实现一种禁用默认工具提示显示的方法。

鉴于 css 似乎没有做这项工作，这里的帖子中的帖子：How to disable tooltip in the browser with jQuery? 建议标题属性可以重命名为 aTitle，或类似的东西。由于这些实际上包含在标题标签中，而不是 rect 元素的标题属性，我猜你可以（1）创建新元素，（2）复制标题的内容（3）在旧元素之前附加新元素，（4）删除旧元素。

不过，我不知道你是否可以 document.createElement('aTitle') - 我不记得是否失败了。

Anyhoo - jsfiddle 在这里：http://jsfiddle.net/CvZfR/25/