Подсказка Bootstrap не отображается

Я пытаюсь использовать 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? Я действительно ударяю головой об этом.

Ответы

Ответ 1

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

Функциональность выбора:
По соображениям производительности всплывающие подсказки и Popover data-apis выбирают, что означает, что вы должны инициализировать их самостоятельно.

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

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

Или используйте любой селектор, который вы хотите.

Рабочая демонстрация в jsFiddle

Что должно выглядеть так:

screenshot

Ответ 2

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

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

Затем я нашел решение на другом StackOverFlow, отвеченном ImaJedi4ever, которое работает как прелесть для меня, чтобы инициализировать всплывающую подсказку:

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

Ответ 3

Была ли проблема, показывающая это в метеор с реакцией и бутстрапом 4 альфа. это работает как волшебство!

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