Question

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

可以使用以下代码/小提琴复制。在IE中，您可以获得每个对象的新工具提示。

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

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

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

http://jsfiddle.net/CvZfR/

Answer 1

我找到了一种方法：将一些&zwnj;或&zwj;放入标题文字中。这些是零宽度不可见字符。这些的不同组合使标题看起来与Chromium不同。

Answer 2

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

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

虽然，我不知道你是否可以document.createElement（'aTitle'） - 我不记得是否失败。

Anyhoo - jsfiddle here：http://jsfiddle.net/CvZfR/25/

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

2 个答案: