Всплывающая подсказка игнорирует bootstrap5 css

У меня проблемы с использованием всплывающих подсказок bootstrap 5 в моем webapp. Мой шаблон django работает следующим образом:

{% block css %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">     
    <link rel="stylesheet" href="{% static 'css/base.css' %}">

    <!-- Bootstrap CSS for Tabulator -->
    <link rel="stylesheet" href="{% static 'css/tabulator_bootstrap4.min.css' %}">
{% endblock %}
...
{% block javascript %}
    <!-- jQuery -->           
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

    <!-- tabulator -->
    <script src="{% static 'js/tabulator.min.js' %}"></script>

    <!-- Bootstrap JavaScript -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> 
               
    <!-- bootstrap select picker -->
    <script src="{% static 'js/bootstrap-select.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}"></script>

    <!-- font awesome -->
    <script src="{% static 'fontawesome_free/js/all.min.js' %}"></script>
        
{% endblock javascript %}

В моем html я использую этот код:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    console.log("added a tooltip");
    return new bootstrap.Tooltip(tooltipTriggerEl)

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

`<button type = button
         class="btn btn-sm btn-primary" 
         data-bs-toggle="tooltip" 
         data-bs-placement="top" 
         title="${row.tooltip}">
         <i class="fas fa-print"></i>
 </button>`;

Я вижу, что сообщение added a tooltip никогда не появляется... почему?

Вернуться на верх