Question

68

How to create Bootstrap Popover Close Option

rated 0 times [ 72] [ 4] / answers: 1 / hits: 16129 / 11 Years ago, mon, march 25, 2013, 12:00:00

As you can see in the jQuery, I have used the answer from this question to make a Bootstrap Popover disappear on an outside click. Now I am looking to add an x in the top right corner that closes the popover on click.

Is there a simple way to create a clickable x on the top right corner of the popover that would close the popover when clicked?

HTML:

<h3>Live demo</h3>

<div class=bs-docs-example style=padding-bottom: 24px;>

    <a href=# class=btn btn-large btn-danger data-toggle=popover title=A Title data-content=And here's some amazing content. It's very engaging. right?>Click to toggle popover</a>

</div>

jQuery:

var isVisible = false;

var clickedAway = false;



$('.btn-danger').popover({

    html: true,

    trigger: 'manual'

}).click(function(e) {

    $(this).popover('show');

    clickedAway = false

    isVisible = true

    e.preventDefault()

});



$(document).click(function(e) {

    if (isVisible & clickedAway) {

        $('.btn-danger').popover('hide')

        isVisible = clickedAway = false

    } else {

        clickedAway = true

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ravenl

Add To Favorites

Follow

Total Points: 338

Total Questions: 107

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

ravenl questions

1 TypeError: e.preventDefault is not a function on React Hook Form using EmailJs

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Vue @change event not working in < b-form-datepicker/>

Thu, Feb 18, 21, 00:00, 3 Years ago

1 Image type in typescript

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How can I append HTML code using JavaScript?

Tue, Mar 17, 20, 00:00, 4 Years ago

1 make the first tab the active tab when open a bootstrap modal

Sun, Feb 16, 20, 00:00, 4 Years ago

View All

answered 11 Years ago makiyac · Accepted Answer

here is the jquery code:

This one just adds the X button to the right upper corner:

            var isVisible = false;

            var clickedAway = false;



            $('.btn-danger').popover({

                    html: true,

                    trigger: 'manual'

                }).click(function(e) {

                    $(this).popover('show');

                    $('.popover-title').append('<button type=button class=close>&times;</button>');

                    clickedAway = false

                    isVisible = true

                    e.preventDefault()

                });



            $(document).click(function(e) {

              if(isVisible & clickedAway)

              {

                $('.btn-danger').popover('hide')

                isVisible = clickedAway = false

              }

              else

              {

                clickedAway = true

              }

            });

And this one closes the popup only when the X button is clicked:

            $('.btn-danger').popover({

                    html: true,

                    trigger: 'manual'

                }).click(function(e) {

                    $(this).popover('show');

                    $('.popover-title').append('<button type=button class=close>&times;</button>');

                    $('.close').click(function(e){

                        $('.btn-danger').popover('hide');

                    });

                    e.preventDefault();

                });