Подсказка Bootstrap не отображается при наведении SVG

не могли бы вы взглянуть на это ссылке и дайте мне знать, почему подсказка bootstrap не отображается на этом svg?

вот код, который у меня есть 

<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>

и

Я использую эту функцию jQuery

$('.firststar').tooltip();
6
jquery-svg twitter-bootstrap

1 ответов

причина в том, что по умолчанию он вставляет динамически сгенерированную подсказку div в svg, что делает браузер не отображать его. Вместо этого используйте container свойство в параметрах, чтобы установить контейнер, где должен быть размещен сгенерированный div boostrap. Смотрите пример ниже:

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

контейнер может быть любым не контейнером элемента svg. скажите в вашем случае .well поэтому вы напишете это как

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

демо

посмотреть подсказки опции

15