Bootstrap Tooltip Not showing on SVG Hover

Question

Can you please take a look at this LINK and let me know why the bootstrap tooltip not showing on this svg?

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="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200  200" xml:space="preserve">
   <polygon  class="firststar" points="64.385,54.267 56.951,50.769 49.854,54.911 50.884,46.76 44.752,41.291 52.823,39.751 56.129,32.229 60.087,39.429 
68.262,40.249 62.639,46.239 "/>
  </svg>
</div>
</div>

and

I am using this jquery function

$('.firststar').tooltip();

Helpless

Answer 1

The reason is because by default it inserts the dynamically generated tooltip div in the svg which makes browser not to render it. Instead use the container property in the options to set the container where the boostrap generated div needs to be placed. See an ex below:

$('.firststar').tooltip({title:'sometitle', container:'body'});

Container can be any non svg element container. say in your case .well so you would write it as

$('.firststar').tooltip({title:'sometitle', container:'.well'});

Demo

See tooltip options

Allpowerful

Thanks PSL, so we always have to pass the options like container:'body' am I right? – Helpless

@MonaCoder You are welcome. You could provide any other container too. like $('.firststar').tooltip({title:'some title', container:'.well'}); – Allpowerful