铬SVG悬停<title>工具提示异常

Question

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

可以使用以下代码/ fiddle来复制此问题。在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/

- paperjam

Answer 1

我发现一种有效的方法：在标题文本中加入一些‌或‍。这些是零宽不可见字符。不同组合可以使标题在Chromium中看起来不同。

- paperjam

Answer 2

我猜这可能对你的需求来说有点重，而且你需要实现一种禁用默认工具提示显示的方法。

鉴于 CSS 似乎无法完成这项工作，在这个帖子中提到：如何使用 jQuery 禁用浏览器中的工具提示？ 建议将 title 属性重命名为 aTitle 或类似的名称。由于这些实际上包含在 title 标签中，而不是 rect 元素的 title 属性中，所以我猜你可以 (1) 创建新元素，(2) 复制 title 的内容，(3) 在旧元素之前添加新元素，(4) 删除旧元素。

但是，我不知道是否可以 document.createElement('aTitle') - 我记不清了它是否失败。

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

- enhzflep