Showing text on mouseover - Title element inconsis

Question

I'm trying to do something similar to this (display a bit of text when a user mouses over an element). Here's a snippet of the html my script generates:

<svg width="400" height="400">
  <rect x="100" y="100" width="40" height="45" fill="darkred">
    <title>Some_Text, 50, 20.09%</title>
  </rect>
</svg>

When I mouse over my rects, nothing appears, which isn't consistent since text does appear when I mouse over rects in the above link. I also tried changing the title element within rect to a title attribute, but that didn't solve the issue. How do I fix this?

What I want in the end is for text to show when mousing over certain elements. Is there a more consistent way to do this? I'd prefer a simple way, nothing too complicated since this is a small feature and I don't usually touch HTML.

Thanks!

Update: I'm using twistd (python) to serve the html. When I save it and reopen the saved html through chrome, it works as it should. Sounds to me like something going on with twistd.

Answer 1

I did a quick test on a jsFiddle, seems to be working for me in Chrome?

http://jsfiddle.net/bnUDE/1/

Assuming you are looking for text to appear once the user hovers over the rectangle? In my case, Top, Middle and Bottom Box depending on the box.