Bootstrap Tooltip не отображается

Question

Я пытаюсь использовать Bootstrap tooltip в приложении. В настоящее время у меня есть следующее:

<button type="button" class="btn btn-default" 
     data-toggle="tooltip" data-placement="left" 
     title="Tooltip on left"> 
      Tooltip on left 
</button> 

К сожалению, моя всплывающая подсказка не отображается. Я пытаюсь понять, что я делаю неправильно. Я знаю, что он может быть создан с помощью JavaScript. Тем не менее, я пытаюсь определить свою подсказку декларативно. Я подтвердил, что файл Tooltip.js включен. Однако я не могу понять, что я делаю неправильно.

Можно ли использовать всплывающую подсказку в чисто декларативном смысле? Если да, может ли кто-нибудь показать мне, как с помощью примера JSFiddle или Bootply? Я действительно ударяю головой об этом.

Answer 1

Нет, это невозможно использовать всплывающую подсказку в чисто декларативном смысле. Из Docs:

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Таким образом, вы должны вызвать .tooltip() вручную в JavaScript, как это:

$("[data-toggle=tooltip]").tooltip(); 

Или использовать любые Селектор вы хотите.

Working Demo in jsFiddle

Который должен выглядеть следующим образом:

Answer 2

В моем проекте у меня есть DIV с .btn-группы класса и 3 'а' элементов с классом БТН. Инициализация с официальным кодом Bootstrap не работает (я использую Twitter.Bootstrap.less, я не знаю, делает какие-либо различию):

$(function({ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

Тогда я нашел решение на другом StackOverflow Ответил ImaJedi4ever что работать как шарм для меня, чтобы инициализировать самозагрузки подсказку:

$(function(){ 
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
}); 

Answer 3

была проблема с указанием его в метеора с реагировать и самонастройки 4 альфа. это работает как волшебство!

componentDidMount() { 
    $(function(){ 
     $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
    }); 
},