1

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.

Ricky Moreno
  • 189
  • 1
  • 2
  • 7

1 Answers1

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.

Amaerth
  • 178
  • 2
  • 13
  • Yeah, that works for me (also using chrome) but I can't figure out why my html doesn't have the same effect. Something I'm doing HAS to be preventing this, right? I just can't figure out what it is I'm doing somewhere else. Not much is online about what affects this feature. – Ricky Moreno Jun 28 '12 at 20:18
  • I saved the html file I was viewing and changed opened it. I cans see the text now, but why do I have to save the html file I'm viewing just to reopen it? If it changes anything, it's being served by python's twistd module. – Ricky Moreno Jun 28 '12 at 20:30