Twitter Bootstrap Question posted in

My Bootstrap popover is not working, how can I debug it?-Twitter bootstrap

I have already see following answers:

1) Twitter's Bootstrap popover not working

2) Twitter bootstrap .popover not working

3) Bootstrap Popover not working

None helps me solve the problem.

I am trying to use a Popover in Bootstrap, I click the button but the popover doesn’t appear.

I can not find the problem. This is the HTML code of the popover and I got it from the documentation.

        <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>

This is instead the code relating to imports.

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/style/global.css">
<link rel="stylesheet" href="/bower_components/lightslider/dist/css/lightslider.css">
<link rel="stylesheet" type="text/css" href="/style/flags/flags.css"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/script/index.js"></script>
<script src="/bower_components/popper.js/dist/popper.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/lightslider/dist/js/lightslider.js"></script>
Tags:

3

Answers


  1. 0

    You might be missing the instance of popover… try adding 

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

    and verify that your links are correct.
    Also verify its requirements here

    Login or Signup to reply.
  2. 0

    Please do the following changes and try again.

    Include the css files in the head section and JS file before ”.

    Also add the below js code:

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

    The main issue is in the css confliction:

    Replace your button with this

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

    and add this css

    .povr{ margin-top:50px;}

    This will fix the issue. Change the CSS according to your need.

    Fiddle

    Login or Signup to reply.
  3. 0

    Per our discussion in the comments – the likely culprit here is Bower. Bootstrap abandoned Bower in V4 in favor of Yarn or npm:

    Dropped Bower support as the package manager has been deprecated for
    alternatives (e.g., Yarn or npm). See bower/bower#2298 for details.

    https://getbootstrap.com/docs/4.0/migration/#breaking

    Relying on a different package manager or including Bootstrap manually is the best route to ensuring that all of your CSS and JavaScript (as it relates back to Bootstrap) complies with V4 requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search