Bootstrap Подсказки, похожие на регулярные HTML-подсказки

Question

Я пробовал все, всплывающие окна отлично смотрятся, но всплывающие подсказки просто показывают, как регулярная подсказка HTML.

Это то, что я в моем коде

HTML

<th rel="tooltip" title="Number of calls made to our API">Api Call</th> 

Javascript

//Tooltips 
     $('[rel=tooltip]').tooltip({ 
     'selector': '[rel=tooltip]', 
     'placement': 'top' 
     }); 

и Насколько я могу сказать, IM импорта начальной загрузки CSS и JS хорошо, так как модалов и popovers отлично работают на всем сайте.

Что мне не хватает?

Answer 1

Двойное определение селектора, кажется, сбросив подсказку Bootstrap в. Если вы удалите 'selector': '[rel=tooltip]', с объекта, который вы перейдете на .tooltip(), который должен его исправить.

Ваша разметка будет выглядеть так:

<th rel="tooltip" title="Number of calls made to our API">Api Call</th> 

И Ваш JavaScript будет выглядеть так:

//Tooltips 
$('[rel=tooltip]').tooltip({ 
    'placement': 'top' 
}); 

Поскольку вы уже выбора элементов с атрибутом rel, установленным в «всплывающую подсказку» вы не» t необходимо указать селектор в объекте, в котором вы проходите.

Для рабочего, неокрашенного, демо check out this Fiddle

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

$(document).tooltip({ 
    'selector': '[rel=tooltip]', 
    'placement': 'bottom' 
}); 

Answer 2

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

<th rel="tooltip" data-toggle="tooltip" title="Number of calls made to our API">Api Call</th> 

Вы забыли добавить data-toggle="tooltip" часть.

Answer 3

Убедитесь, что инициализация подсказки выполняется, когда документ будет готов, как это ..

$(function() { 
    $("[rel='tooltip']").tooltip({placement:'top'}); 
}); 

или ..

$(document).ready(function() { 
    $("[rel='tooltip']").tooltip({placement:'top'}); 
});