title: How to show tooltip for text in SVG?
body: <p>I need a tooltip when the user hovers over text in SVG. Also, the text and the tooltip content should be modifiable with javascript.</p>
  
  <p>The following works in Firefox but not Chrome. What's the correct way to do this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100"&gt;
      &lt;rect width="100" height="100" style="fill:black;stroke-width:0"&gt;&lt;/rect&gt;
      &lt;text id="text1" x="50" y="15" text-anchor="end"&gt;text1&lt;/text&gt;
      &lt;text id="text2" x="80" y="15" text-anchor="end"
        transform="translate(0,50)"&gt;text2&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Javascript (with jQuery):</p>
  
  <pre><code>$('#text1').attr('title', 'Tooltip 1');
  $('#text2').attr('title', 'Tooltip 2');
  </code></pre>
  
  <p>My jsfiddle: <a href="http://jsfiddle.net/getvictor/ctaVA/" rel="noreferrer">http://jsfiddle.net/getvictor/ctaVA/</a></p>