Friday, September 29, 2023
HomeCSSjavascript - Bootstrap Popover Not Showing

javascript – Bootstrap Popover Not Showing

I’m new to Bootstrap, and I’m making an attempt to make a popover seem from clicking a button ingredient. So far as I can inform I initialized bootstrap and the popover ingredient accurately, however the popup ingredient doesn’t seem after I click on my button.

I additionally don’t see any errors or information within the console after I click on the button, however the button itself will get a border round it after I click on it which makes me suppose that the popover perform is doing one thing and making use of no less than the bootstrap types.

Right here is my jQuery and Bootstrap initialization:

<!---JQuery Iniialization --->
<script src="/jquery/jquery.min.js"></script>
<script src="/jquery/libs/jqueryui/jquery-ui.min.js"></script>
<hyperlink rel="stylesheet" href="/jquery/libs/jqueryui/jquery-ui.theme.min.css"/>   
<hyperlink rel="stylesheet" href="/jquery/libs/jqueryui/themes/smoothness/jquery-ui.min.css" />

<!---Bootstrap Iniialization --->   
<script src="https://cdn.jsdelivr.web/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="nameless"></script>
<script src="https://cdn.jsdelivr.web/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="nameless"></script>
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="nameless">

Listed here are my html components and javascript perform:

     $('[data-toggle="popover"]').popover() ;
<button kind="button" class="btn btn-secondary mx-2" data-container="physique" data-toggle="popover" tabindex="0" title="Particulars" data-trigger="focus" title="Particulars" data-content="And this is some wonderful content material. It is very participating. Proper?">
<i class="fa-light fa-memo-circle-info"></i></button>

Am I lacking one thing?



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments