title: Bootstrap / jQuery UI popovers for raphael.js graphics
body: <p>I've got some popovers which I'd like to trigger 'on hover' of some elements of a raphael.js graphic, but I can't seem to get them to work (using jQuery UI and Bootstrap).</p>
  
  <p>I'm calling popovers on the site by referencing a specified class:</p>
  
  <pre><code>$(document).ready(function() {
    $('.show-popover').popover();
  });
  </code></pre>
  
  <p>Then I can trigger popovers by adding the relevant attributes to an HTML tag: <code>class="show-popover"</code>, <code>rel="popover"</code>, <code>data-trigger="hover"</code>, etc.</p>
  
  <p>I've also got some embedded raphael.js SVG graphics on the site. I can't seem to get the popovers to appear for elements (paths, text, etc.) of the raphael.js graphic after I've added the same attributes mentioned above.</p>
  
  <p>Say I add a square to my graphic; I can then add the required popover attributes to the square in raphael.js like so:</p>
  
  <pre><code>square.node.setAttribute('class', 'show-popover');
  square.node.setAttribute('rel', 'popover');
  square.node.setAttribute('data-trigger', 'hover');
  square.node.setAttribute('data-original-title', 'Popover title');
  square.node.setAttribute('data-content', 'Main popover text here...');
  </code></pre>
  
  <p>I can see that the attributes are being added to the SVG with Firebug, but the popover isn't appearing on hover.</p>
  
  <p>Is it possible to trigger popovers for hovering over elements of a raphael.js graphic?</p>
  
  <p>[Edit] See example <a href="http://jsfiddle.net/cQGQT/" rel="nofollow">http://jsfiddle.net/cQGQT/</a></p>