How to insert close button in popover for bootstrap

Question

JS:

$(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>', content : 'test' }) $('html').click(function() { $('#close').popover('hide'); }); }); 

HTML:

 <button type="button" id="example" class="btn btn-primary" ></button> 

I write your code does not show your popup.

Can anyone run into this problem?

Answer 1

You need to make the correct markup

 <button type="button" id="example" class="btn btn-primary">example</button> 

Then one way is to attach a handler inside the element itself, the following works:

 $(document).ready(function() { $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span>'+ '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>', content : 'test' }); }); 

Answer 2

I needed to find something that would work for several popovers in Bootstrap 3 as well.

Here is what I did:

I had several elements for which I wanted to use popover, so I did not want to use identifiers.

The markup can be:

 <button class="btn btn-link foo" type="button">Show Popover 1</button> <button class="btn btn-link foo" type="button">Show Popover 2</button> <button class="btn btn-link foo" type="button">Show Popover 3</button> 

The contents of the save and close buttons inside the popover:

 var contentHtml = [ '<div>', '<button class="btn btn-link cancel">Cancel</button>', '<button class="btn btn-primary save">Save</button>', '</div>'].join('\n'); 

and javascript for all three buttons:

This method works when the container is not attached to the body by default.

 $('.foo').popover({ title: 'Bar', html: true, content: contentHtml, trigger: 'manual' }).on('shown.bs.popover', function () { var $popup = $(this); $(this).next('.popover').find('button.cancel').click(function (e) { $popup.popover('hide'); }); $(this).next('.popover').find('button.save').click(function (e) { $popup.popover('hide'); }); }); 

When the container is attached to the body

Then use the described aria to find the popup and hide it.

 $('.foo').popover({ title: 'Bar', html: true, content: contentHtml, container: 'body', trigger: 'manual' }).on('shown.bs.popover', function (eventShown) { var $popup = $('#' + $(eventShown.target).attr('aria-describedby')); $popup.find('button.cancel').click(function (e) { $popup.popover('hide'); }); $popup.find('button.save').click(function (e) { $popup.popover('hide'); }); }); 

Answer 3

I found that the other answers were either not generalized enough or too complicated. Here is a simple one that should always work (for bootstrap 3):

 $('[data-toggle="popover"]').each(function () { var button = $(this); button.popover().on('shown.bs.popover', function() { button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () { button.popover('toggle'); }); }); }); 

Then just add the data-dismiss="popover" to your close button. Also, do not use popover('hide') elsewhere in your code as it hides the popup but does not set its internal state in the source code, which will cause problems the next time you use popover('toggle') .

Answer 4

The following is what I just used in my project. And I hope that he can help you.

 <a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true data-original-title="weclome to use the sql query" data-content="content">example</a> $('#manualinputlabel').click(function(e) { $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>'); $(this).popover(); }); $(document).click(function(e) { if(e.target.id=="popovercloseid" ) { $('#manualinputlabel').popover('hide'); } }); 

Answer 5

I checked many of the code examples mentioned, and for me, Chris's approach works just fine. I added my code here to have a working demo.

I tested it with Bootstrap 3.3.1, and I did not test it with an older version. But this definitely does not work with 2.x, because the shown.bs.popover event was introduced with 3.x.

 $(function() { var createPopover = function (item, title) { var $pop = $(item); $pop.popover({ placement: 'right', title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>', trigger: 'click', html: true, content: function () { return $('#popup-content').html(); } }).on('shown.bs.popover', function(e) { //console.log('shown triggered'); // 'aria-describedby' is the id of the current popover var current_popover = '#' + $(e.target).attr('aria-describedby'); var $cur_pop = $(current_popover); $cur_pop.find('.close').click(function(){ //console.log('close triggered'); $pop.popover('hide'); }); $cur_pop.find('.OK').click(function(){ //console.log('OK triggered'); $pop.popover('hide'); }); }); return $pop; }; // create popover createPopover('#showPopover', 'Demo popover!'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button> <div id="popup-content" class="hide"> <p>Simple popover with a close button.</p> <button class="btn btn-primary OK">OK</button> </div> 

Answer 6

The trick is to get the current Popover with .data ('bs.popover'). tip () :

 $('#my_trigger').popover().on('shown.bs.popover', function() { // Define elements var current_trigger=$(this); var current_popover=current_trigger.data('bs.popover').tip(); // Activate close button current_popover.find('button.close').click(function() { current_trigger.popover('hide'); }); }); 

Answer 7

This works with several popovers, and I also added a few large additional JSs to handle the z-index problems that occur with overlapping popovers:

http://jsfiddle.net/erik1337/fvE22/

JavaScript:

 var $elements = $('.my-popover'); $elements.each(function () { var $element = $(this); $element.popover({ html: true, placement: 'top', container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier content: $('#content').html() }); $element.on('shown.bs.popover', function (e) { var popover = $element.data('bs.popover'); if (typeof popover !== "undefined") { var $tip = popover.tip(); zindex = $tip.css('z-index'); $tip.find('.close').bind('click', function () { popover.hide(); }); $tip.mouseover(function (e) { $tip.css('z-index', function () { return zindex + 1; }); }) .mouseout(function () { $tip.css('z-index', function () { return zindex; }); }); } }); }); 

HTML:

 <div class="container-fluid"> <div class="well popover-demo col-md-12"> <div class="page-header"> <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3> </div> <div class="btn-group"> <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button> <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button> <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button> </div> </div> </div> <div id="content" class="hidden"> <button type="button" class="close">&times;</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> 

CSS

 /* Make the well behave for the demo */ .popover-demo { margin-top: 5em } /* Popover styles */ .popover .close { position:absolute; top: 8px; right: 10px; } .popover-title { padding-right: 30px; } 

Answer 8

The previous examples have two main drawbacks:

• The close button needs some way to know the identifier of the reference element.
• The need to add the event.bs.popover event, the 'click' listener to the close button; which is also not a good solution because of this, you will add such a listener every time a "popover" is displayed.

The following is a solution that does not have such disadvantages.

By default, the popover element is inserted immediately after the reference element in the DOM (then pay attention to the reference element, and popover is the immediate sibling element). Thus, when the close button is pressed, you can simply find the closest parent div.popover element and then look for the immediately preceding sibling element of that parent.

Just add the following code to the close button onclick handler:

 $(this).closest('div.popover').popover('hide'); 

Example:

 var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>'; $loginForm.popover({ placement: 'auto left', trigger: 'manual', html: true, title: 'Alert' + genericCloseBtnHtml, content: 'invalid email and/or password' }); 

Answer 9

Just wanted to update the answer. According to Swashata Ghosh, the following is a simple way to work with moi:

HTML:

 <button type="button" class="btn btn-primary example">Example</button> 

JS:

 $('.example').popover({ title: function() { return 'Popup title' + '<button class="close">&times</button>'; }, content: 'Popup content', trigger: 'hover', html: true }); $('.popover button.close').click(function() { $(this).popover('toggle'); }); 

Answer 10

Try the following:

 $(function(){ $("#example") .popover({ title : 'tile', content : 'test' }) .on('shown', function(e){ var popover = $(this).data('popover'), $tip = popover.tip(); var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>') .click(function(){ popover.hide(); }); $('.popover-title', $tip).append(close); }); }); 

Instead of adding a button as a markup line, it’s much easier if you have a jQuery-wrapped button, because then you can bind much more accurately. This is really sadly missing in Bootstrap code, but this workaround works for me and can actually be extended to apply to all popovers if necessary.

Answer 11

I have a fight with this and this is the easiest way to do this, 3 lines of js:

• Add cross in popover title
• use js snippet to show popover and close by clicking title
• Use a little css to make it enjoyable.

 $(document).ready(function() { // This is to overwrite the boostrap default and show it allways $('#myPopUp').popover('show'); // This is to destroy the popover when you click the title $('.popover-title').click(function(){ $('#myPopUp').popover('destroy'); }); }); 

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; /* Just to align my example */ .btn { margin: 90px auto; margin-left: 90px; } /* Styles for header */ .popover-title { border: 0; background: transparent; cursor: pointer; display: inline-block; float: right; text-align: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button> 

Answer 12

 $popover = $el.popover({ html: true placement: 'left' content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>' trigger: 'manual' container: $container // to contain the popup code }); $popover.on('shown', function() { $container.find('.popover-content a').click( function() { $popover.popover('destroy') }); }); $popover.popover('show')' 

Answer 13

 $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title!!</strong></span> <button type="button" id="close" class="close">&times;</button></span>', content : 'test' }) $(document).on('click', '#close', function (evente) { $("#example").popover('hide'); }); $("#close").click(function(event) { $("#example").popover('hide'); }); }); <button type="button" id="example" class="btn btn-primary" >click</button> 

Answer 14

  $('.tree span').each(function () { var $popOverThis = $(this); $popOverThis.popover({ trigger: 'click', container: 'body', placement: 'right', title: $popOverThis.html() + '<button type="button" id="close" class="close" ">&times;</button>', html: true, content: $popOverThis.parent().children("div.chmurka").eq(0).html() }).on('shown.bs.popover', function (e) { var $element = $(this); $("#close").click(function () { $element.trigger("click"); }); }); }); 

When you click on an item and show your popup, next time you can raise the show.bs.popover event, where in it you get the item in which the trigger will click to close your popover.

Answer 15

FWIW, here is the general solution that I am using. I am using Bootstrap 3, but I think the general approach should work with Bootstrap 2.

The solution allows popovers and adds a close button for all popovers identified by the rel = "popover" tag, using a common block of JS code. Besides the (standard) requirement that there is a rel = "popover" tag, you can impose an arbitrary number of popovers on the page, and you do not need to know their identifiers - in fact, they do not need identifiers at all. You need to use the 'data-title' HTML tag format to set the title attribute of your popovers and set the html value to true.

The trick I found necessary is to build an indexed map of links to popover objects ("po_map"). Then I can add an onclick handler via HTML that references the popover object through the index that jQuery gives me for it ("p_list ['+ index +']. Popover (\ 'toggle \')"). This way, I don’t have to worry about the identifiers of popover objects, since I have a map of links to the objects themselves with a unique jQuery index.

Here's the javascript:

 var po_map = new Object(); function enablePopovers() { $("[rel='popover']").each(function(index) { var po=$(this); po_map[index]=po; po.attr("data-title",po.attr("data-title")+ '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">&times;</button>'); po.popover({}); }); } $(document).ready(function() { enablePopovers() }); 

this solution allowed me to easily set the close button for all replenishment on my entire site.

Answer 16

I found the code below very useful (taken from https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/ ):

 $('[data-toggle="popover"]').popover({ title: function(){ return $(this).data('title')+'<span class="close" style="margin-top: -5px">&times;</span>'; } }).on('shown.bs.popover', function(e){ var popover = $(this); $(this).parent().find('div.popover .close').on('click', function(e){ popover.popover('hide'); }); }); 

Answer 17

Attached to hover, HTML:

 <a href="javascript:;" data-toggle="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Lorem Ipsum">...</a> 

JavaScript:

 $('[data-toggle=popover]').hover(function(e) { if( !$(".popover").is(':visible') ) { var el = this; $(el).popover('show'); $(".popover > h3").append('<span class="close icon icon-remove"></span>') .find('.close').on('click', function(e) { e.preventDefault(); $(el).popover('hide'); } ); } }); 

Answer 18

Put this in your header popover constructor ...

 '<button class="btn btn-danger btn-xs pull-right" onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon glyphicon-remove"></span></button>some text' 

... to get the little red "x" button in the upper right corner

 //$('[data-toggle=popover]').popover({title:that string here}) 

Answer 19

For those who are still a little confused:

Here's how it works to switch the popover after you display it, select the same button you used to launch it, and call .popover ('toggle') on it.

In this case, to close the popover, the code will look like this:

$ ('# example') popover ('switch') ;.

Answer 20

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.popover-1.1.2.js"></script> <script type="text/javascript"> $(function(){ $("#example").popover({ placement: 'bottom', html: 'true', title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button></span>', content : 'test' }) $("#close").click(function(event) { $("#example").popover('hide'); }); }); </script> <button type="button" id="example" class="btn btn-primary" >click</button>