Bootstrap Hint Not Displayed in SVG Hover

Question

Could you take a look at this LINK and tell me why the bootstrap tooltip is not displayed 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 use this jquery function

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

Answer 1

The reason is that by default it inserts a dynamically created div tool into svg, which makes the browser not display it. Instead, use the container property in the options to set the container in which the div file with the extension should be placed. See below:

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

A container can be any container of non svg elements. let's say in your case .well so you can spell it as

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

Demo

See the tips