How can I open a center tooltip in SVG

Question

Could you take a look at this JsFiddle and tell me how I can center the tooltip inside an SVG? I already see the same question on this post , but to be honest, it was too confusing for me!

Here is the code I have:

<div class="container"> <div class="well"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve"> <ellipse class="firststar" cx="200" cy="200" rx="150" ry="150"/> </svg> </div> </div> 

and jquery code:

 $('.firststar').tooltip({title:'Test SVG Centering', container:'.well', placement: 'top'}); 

Answer 1

These are the following steps:

• Download Bootstrap Source

• The related question seems to have a solution to the bug problem in Boostrap. Copy the code for getPosition. Add to the center of the tooltip (Ctrl + F for getPosition again, but don’t find the function, but use it):

   case: 'center': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width / 2 - actualWidth / 2} break 

• Be sure to change the link in your HTML to reference the updated bootstrap.js file.

Edit: link to working JFiddle . Bootstrap code has changed from another post, and this is the easiest way to achieve what you want.