How to create Bootstrap Popover Close Option

Question

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
    }
});

@JorgeCode's code works. I use the first one without adding the close button in the title row. (Can't make a comment on Jorge Code answer because of lack of privilege) — Huang Zhu, Jun 21 '13 at 21:56

CodeArtist · Accepted Answer · 2013-03-28T05:27:03.670

16

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();
                });

edited Mar 28 '13 at 05:27

answered Mar 25 '13 at 03:12

CodeArtist

5,534
8
40
65

Thank you for this! I +1'ed it! The only problem is that when I add this to my site, clicking on the "x" to close the popover also, for some reason, submits my form. Any idea why that may be? – Raphael Rafatpanah Mar 25 '13 at 12:22
Since you technically answered my question, I am going to give you a check also! Still working on the form submit issue. – Raphael Rafatpanah Mar 25 '13 at 12:35
hi, the problem isn't in this code. I believe that is somewhere else except if you made this button a submit button... – CodeArtist Mar 25 '13 at 12:53
Got it solved, it was because of ' – Raphael Rafatpanah Mar 25 '13 at 12:57
Ok i got it but is not a button is a link. Try this: . Maybe recognizes it like "sumbit" button so maybe if you specify the type="button" will solve your problem. – CodeArtist Mar 25 '13 at 13:16
Great work on that second easy example! +1 Exactly the answer I was looking for! – Phil Nicholas Dec 23 '13 at 23:34

score 1 · Answer 2 · answered Apr 14 '15 at 04:11

I kno this question has been answered already but your post semi-helped me . Stumbled across a simplier way to acomplish this task suppose you have all popovers with the class '.pop', this should solve all your problems

$('.pop').on({
  click:function(){
    $('.pop').not(this).popover('hide');
  }
});

How to create Bootstrap Popover Close Option

2 Answers2