Bootstrap Tooltip Not Displaying

Question

Я пытаюсь использовать всплывающие подсказки для всплывающих окон, но в настоящее время я не могу их отобразить. Я выполнил все инструкции в руководстве Bootstrap Docs, но они все еще не работают. Есть ли что-то, что я могу потерять?

HTML:

<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh</button> 
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as read"><i class="fa fa-eye"></i> </button> 
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button> 
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to trash"><i class="fa fa-trash-o"></i> </button> 

JS:

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

И код пера можно найти здесь: http://codepen.io/anon/pen/LpzPxR

Моя первоначальная догадка, что-то не так с CSS , но я не могу заставить его работать в ручке либо.

EDIT: Я исправил проблему в codepen но фактический шаблон по-прежнему отображать неправильно - http://i62.tinypic.com/2ik2u6s.jpg

Answer 1

Вы почти там: вы просто не хватает JQuery до bootstrap.js.

От начальной загрузки документации:

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины в отдельности, обязательно проверьте эти зависимости в документах. Кроме того, обратите внимание, что все модули зависят от JQuery (это означает, что JQuery должен быть включен перед плагином файлов)

См forked codepen

NB: Я также добавил font-awesome.css, как у вас есть иконки из этой последней библиотеки ,

---

Edit: от this screenshot публикуемых в комментариях и беседах, оказался, что ОП был также jQuery UI Tooltip, который конфликтует с бутстраповскими подсказками.