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

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

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

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

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

12
jquery tooltip twitter-bootstrap

3 ответов

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

отказ в функциональности:
По соображениям производительности всплывающая подсказка и API-интерфейсы данных являются opt-in, то есть вы должны инициализировать их самостоятельно.

Итак, вы должны позвонить .tooltip() вручную в JavaScript такой:

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

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

рабочая демо в jsFiddle

, который должен выглядеть так:

screenshot

31

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

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

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

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

была проблема с отображением его в meteor с react и bootstrap 4 alpha. это работает как по волшебству!

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