Всплывающее окно начальной загрузки не работает, несмотря на инициализацию (проблема с тегами скрипта?)

Question

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

Я запускаю всплывающие окна в скрипте .js в моем шаблоне Django с помощью:

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

Я пробовал множество подобных реализаций, но безуспешно.

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

Вот мои теги сценариев:

    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
    <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
    <!-- Theme style  -->
    <link rel="stylesheet" href="../static/bootstrap/css/style.css">
    <!--star ratings-->
    <link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
    <script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

Расположите ваши ссылки и сценарии таким образом и измените свой CDN начальной загрузки на последнюю версию 4.3

<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--star ratings-->
<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<!-- Theme style  -->
<link rel="stylesheet" href="../static/bootstrap/css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>

ПРИМЕР POPOVER

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

<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>