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

У меня проблема с подсказками bootstrap 3.

Я использую Тема приложения Bootstrap.

Вот мой код:

<div class = "col-md-2 col-xs-6 margin_bottom_15">
    <a href = "{{ path('list_course_teaching_events', {'course' : course.id }) }}"
        class = "col-md-12 btn btn-block btn-primary-outline" 
        data-toggle = "tooltip" data-placement = "left" title = "ToolTipText">
        <i class = "icon icon-arrow-bold-left"></i>
    </a>            
</div>

Я также включил привязь, чтобы заставить работать плагин tooltip js. Я также включил js:

{# activate tooltips for this page #}
<script type = "text/javascript">
    $(document).ready(function(){
        $('[data-toggle = "tooltip"]').tooltip();
    });
</script>

И плагин всплывающей подсказки, кажется, работает. Но не в правильном направлении:

Как видите, ToolTipText появляется на левом краю страницы независимо от того, какое выравнивание я пишу в разделе размещения данных, и далеко от моего триггера всплывающей подсказки, который находится в середине страницы. И его обычный текст.

Есть ли у некоторых из вас представление о том, где может быть проблема?

Вот жизненный вариант проблемы: Справа есть кнопка