Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap javascript or popover not working

Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/) This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.

The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:

 <script src="js/bootstrap.min.js"></script>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
like image 429
user1911283 Avatar asked Dec 17 '12 22:12

user1911283


People also ask

Why are popovers not showing up?

Zero-length title and content values will never show a popover. Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc). Triggering popovers on hidden elements will not work.

How do you activate popovers?

Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the id , class or any CSS selector of the required element in your JavaScript code. You can either initialize popovers individually or all in one go.

How do I show popover in bootstrap 5?

To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.

Does bootstrap 5 need Popper js?

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.


1 Answers

jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".

You should Include in this order:

  1. jQuery
  2. Bootstrap
  3. Your Javascript

EDIT: Try this right before the closing body tag

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script> 
$(function(){
    $('#test').popover();​
});
 </script>

Also, the console is your friend. Check and make sure there are no errors.

SOLVED:

Solution: > Right order of Includes > fixing errors i got from my js console.

like image 91
Applehat Avatar answered Sep 28 '22 11:09

Applehat