CODEWITHSUNDEEP
javascriptjquerybootstrap-popover
Callum K
Callum K

Reputation: 183

Popover in Bootstrap

I want to provide a set of additional information in my bootstrap template. I want to have a set of terms and conditions with a plain english popover for certain key terms.

I've included all the correct links to the CDN and I get a popup from just the below code but when I view it as a whole page this stops working and just sends me back to the top of the page. Is there something that I need to bear in mind when doing this? I've spent days trying to tweak this to work?

Thank you

<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/popover.js"></script>

<!-- Plugin JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<aside class="bg-dark">
  <div class="container text-center">
    <h2>An example of what we will do</h2>
    <hr class="light">

    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

  </div>
</aside>

<script>
  $(document).ready(function() {
    $('[data-toggle="popover"]').popover();
  });
</script>

Upvotes: 1

Views: 5013

Answers (1)

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

You didn't set right the CDN file. Please set the right path to the jquery library and try to remove the file jquery.slim if it's not required.

Checkout the snippet

$('[data-toggle="popover"]').popover();  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<aside class="bg-dark">
  <div class="container text-center">
    <h2>An example of what we will do</h2>
    <hr class="light">

    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

  </div>
</aside>

Upvotes: 1

Related Questions