title: Is there a cross-browser way for tooltips?
body: <p>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, <a href="https://raw.github.com/bigmlcom/tipsy/master/src/javascripts/jquery.tipsy.js" rel="nofollow">tipsy</a> but it does not seem to be cross-browser compatible.</p>
  
  <p>For instance, consider <a href="http://dl.dropbox.com/u/1531353/Misc/Docudocker/setups/tipsyCrashingApplication/force-html.html" rel="nofollow">this</a>. 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 <code>svg title</code> attribute? </p>
  
  <p><strong>EDIT</strong>: I am looking for something that works with d3.js. For instance, using tipsy, we do the following:</p>
  
  <p><code>$("svg circle").tipsy({});</code></p>
  
  <p>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 <a href="http://jsfiddle.net/Legend/bZY9e/" rel="nofollow">jsFiddle</a> <em>without</em> the tooltip added to enable quick tests.</p>