Question

I am working with d3.js for rendering my graphs. For some reason, I am not a huge fan of svg title because of the delay it incurs and the inability to style them. Please do correct me if I am wrong. I recently came across, tipsy but it does not seem to be cross-browser compatible.

For instance, consider this. The tooltips work just fine in Firefox and Chrome but do not appear even in IE 9 and I’m not sure what’s going on. Is there a cleaner cross-browser approach for tooltips compatible with d3.js other than using the svg title attribute?

EDIT: I am looking for something that works with d3.js. For instance, using tipsy, we do the following:

$("svg circle").tipsy({});

This works in Firefox and Chrome but not IE. Similar thing was observed when using the tooltip plugin of Twitter’s Bootstrap. Here’s my jsFiddle without the tooltip added to enable quick tests.

Answer 1

This might be what you’re looking for. I haven’t tested it in IE9 but I would imagine it works.

http://twitter.github.com/bootstrap/javascript.html#tooltips