Question

In many browsers, hover mousepointer over an SVG object with a nested <title> and the title text appears as a tooltip. I’m discovering something strange happens in Chrome if adjacent objects have the same title: the tooltip is not redisplayed when you mouseover from one object to the other.

This can be replicated with the following code/fiddle. In IE, you get a fresh tooltip for each object.

How can I work around this issue? I need to use Chromium and I need the same tooltip to reappear over adjacent objects. I don’t really want to get into (more) scripting unless it can be done in a super lightweight, reliable and flawless with SVG.

Perhaps I can embed something invisible into the title text to make Chromium think each object’s title is different?

<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

I found one approach that works: put some ‌ or ‍ into the title text. These are zero-width invisible characters. Different combinations of these make the title look different to Chromium.