Is there a cross-browser way for tooltips?

Question

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

For example, consider this . Tooltips work fine in Firefox and Chrome, but don't show up even in IE 9, and I'm not sure what is going on. Is there a cleaner cross-browser approach for tooltips compatible with d3.js other than using the svg title attribute?

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

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

This works in Firefox and Chrome, but not in IE. A similar situation was observed when using the Twitter Bootstrap tooltip. Here's jsFiddle without adding a tooltip for quick testing.

Answer 1

This may be what you are looking for. I have not tested it in IE9, but I can assume that it works.

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

Answer 2

qTip is a good cross-platform tooltip plugin.

JQueryUI 1.9 will soon add support for tooltips .

Answer 3

The jQuery Tooltip is lightweight and has good compatibility, I have good results in projects in which I used it.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/