Добавление всплывающей подсказки в Bootstrap через JQuery

Question

Я пытаюсь добавить стандартную всплывающую подсказку ко всем элементам моего DOM, которые имеют определенный класс. Вот что я делаю:

HTML:

$(document).ready(function(){ 
 
\t add_standard_tooltips(); 
 
    }); 
 
    
 
    
 
function add_standard_tooltips(){ 
 
\t $('.has_standard_tooltip').attr('data-toggle', 'tooltip'); 
 
\t 
 
\t // Add tooltip text specific to classes 
 
\t $('.zeon-edit-pencil').attr('title', 'My Tooltip text'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = 'zeon-edit-pencil has_standard_tooltip'>Edgar 
 
</div>

код прекрасно работает с единственным исключением, что подсказка не появляется в стиле Bootstrap (черный фон и белый текст), его выглядит как стандартная подсказка html. Что я здесь делаю неправильно?

UPDATE 1: Я думаю, что нет Bootstrap в инструменте фрагмент кода StackOverflow, так что я обеспечиваю JSFiddle только в случае

UPDATE 2: Вот исходный код в моем проекте:

Answer 1

Я обновил вашу скрипку: jsfiddle.net/4354jy5v/1/

Вы забыли ввести всплывающие подсказки

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

Просто FYI: убедитесь, что вы всегда включают bootstrap.js после jquery.js