title: Why doesn't Twitter Bootstrap popover work with SVG elements?
body: <p>I'm more of a C++ guy, but I am working on some web UI stuff at the moment. I can't seem to get a Bootstrap popover to show up on an SVG element.</p>
  
  <p>Any ideas? The popover works on the normal div.</p>
  
  <p>jsFiddle is here: <a href="http://jsfiddle.net/JjAht/">http://jsfiddle.net/JjAht/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet"&gt;
  
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;svg width="100" height="100"&gt;
          &lt;circle r="45" cx="50" cy="50" style="fill: red"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div class="well"&gt;
      &lt;p&gt;
      Hover here for a popover.
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
          var numCircles = $("circle").length;
          console.log("numCircles = " + numCircles);
  
          $("circle").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});
  
          $("circle").css({"stroke":"blue"});
  
          $(".well").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'});
      } );
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>