Edit Question - KnowledgeHub

Title Body

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. Any ideas? The popover works on the normal div. jsFiddle is here: http://jsfiddle.net/JjAht/ <!DOCTYPE html> <html> <head> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script> </head> <body> <div> <svg width="100" height="100"> <circle r="45" cx="50" cy="50" style="fill: red"/> </svg> </div> <div class="well"> <p> Hover here for a popover. </p> </div> <script type="text/javascript"> $(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'}); } ); </script> </body> </html>

Tags (comma-separated) Cancel