Twitter Bootstrap Question posted in

Insert 'close button' in bootstrap popover-Twitter bootstrap

I will like to know how I can insert a ‘close button’ for a bootstrap popover. Additionally, I will like the popover to close automatically after x number of seconds (say 8 seconds).

<a href='#' id='example' rel='popover' data-animation="true" data-placement='left' data-content='Its so simple to create a tooltop for my website!' title='Twitter Bootstrap Popover'></a>

In my JS, I have

    $('#example').popover({
   'placement':'bottom',
    }).popover('show');
Tags:

2

Answers


  1. 0

    I can’t help with the close button, but if you want to show the popover after a button click, and then hide it after 8 seconds, for example:

    $("#example").popover({ trigger: "manual" }).click(function () {
    var pop = $(this);
    pop.popover("show")
    pop.on('shown.bs.popover', function () {
        setTimeout(function () {
            pop.popover("hide")
        }, 8000);
    })
});

    In my case I use it in a E-commerce website so there’s lots of buttons which may be clicked and open popovers, so I put a class inside the button tag called ‘pop’ and the code will be like:

    $(".pop").popover({ trigger: "manual" }).click(function () {
    var pop = $(this);
    pop.popover("show")
    pop.on('shown.bs.popover', function () {
        setTimeout(function () {
            pop.popover("hide")
        }, 8000);
    })
});

    And now everytime the user clicks any button with the class "pop" the popover comes up and hide after 8 seconds.

    Login or Signup to reply.
  2. 0

    You’d have to override the template and attach a click function:

    $('#example').popover({
  'placement': 'auto',
  'template': '<div class="popover" role="tooltip"><div class="arrow"></div><span class="btn btn-link float-right pop-close">x</span><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
}).popover('show');

$('.pop-close').click(function() {
    $('#example').popover('hide');
});
    body {
  padding: 50px;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<a href='#' id='example' rel='popover' data-animation="true" data-placement='right' data-content='Its so simple to create a tooltop for my website!' title='Twitter Bootstrap Popover'></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search