Question

I’m trying to pick up mouse events for svg:text elements. What I noticed is that .on("click", ...) works, but other events like "mouseover", "mousemove", and "mouseout" don’t.

Looking at the Health & Wealth of Nations example, I see that the approach taken was to overlay the text with an invisible svg:rect and assign it the events instead. This is fine if there’s one simple box, but if there are several it seems it would become tiresome and messy.

Is there a canonical way to handle mouse hover events for text?

For the sake of being as specific as possible, I’m trying to have a tag cloud and pick up on these hover events for each of the tags. I could probably just do it with divs and be done with it, but I’m wondering if there’s an easy way to do it within an SVG container.

Answer 1

I suppose the problem with assigning events to the text elements is that they only fire on the actual text, i.e. not the bounding box. In theory it should work though (at least I’m not aware of any special handling of text in this respect) — can you give a concrete example where it doesn’t?

You could also try putting each text element inside an svg:g element and attaching the event handler to that.