Попсы не отображаются в Bootstrap - PullRequest
Новая
       8

Попсы не отображаются в Bootstrap

0 голосов
/ 21 марта 2020

У меня есть этот код в моем html файле: 

<a href="#" class='nav-link m-2 menu-item' style="color:#ceaa63" data-placement="bottom" data-toggle="popover" data-title="Title" data-content="Some content">
             <i class="fas fa-shopping-cart pr-1"></i>Cart
</a>


<script>
        $(function(){
            $('[data-toggle="popover"]').popover()
        });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

И после нажатия на корзину всплывающее окно не отображается. Что не так с этим кодом?

1 Ответ

0 голосов
/ 21 марта 2020

Вы получаете доступ к зависимым функциям popover и jquery до загрузки файлов сценария.

Поместите файл сценария в конец после загрузки файлов jquery, popover and bootstrap.min.js. 

(function() {
  $('[data-toggle="popover"]').popover()
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<a href="#" class='nav-link m-2 menu-item' style="color:#ceaa63" data-placement="bottom" data-toggle="popover" data-title="Title" data-content="Some content">
  <i class="fas fa-shopping-cart pr-1"></i>Cart
</a>
...