How to add a close button to Bootstrap Popover

Recently I had to build a ‘smart booking form’ for a group of hotels. The website is made on Twitter’s Bootstrap and is fully responsive.
Troubles began when I had to ask the guest for his children’s age, only if he’s telling the form he has children.

Here the Twitter Popover feature comes very handy: if the guest selects one or more children a popover will be shown.

The hard part is to understand when this popover have to be closed.
To make the guest the most comfortable possible let’s put a nice X on the top right corner of the popover.

This is how I added a close button to Twitter Bootstrap Popover in javascript:

// Popover for the quick search additional fields
jQuery('.popover-test').popover({ 
	html : true, 
	content: function() {
		return $(jQuery(this).data('target-selector')).html();
	},
	title: function(){
		return jQuery(this).data('title')+'<span class="close">&times;</span>';
	}
}).on('shown.bs.popover', function(e){
	var popover = jQuery(this);
	jQuery(this).parent().find('div.popover .close').on('click', function(e){
		popover.popover('hide');
	});
});

Please be advise this code must be inserted in document ready function.

And this is the HTML:

<a 
	id="children-age-toggler"
	data-target-selector="#children-age" 
	data-placement="bottom"
	href="javascript:;"
	class="children-age popover-children"
	data-title="Children's Age"
></a>
<div id="children-age" class="hidden">
	<p>Please select your children's Age</p>
	<!-- put here more html forms and stuff -->
</div>

  • Manitra

    Very good tuto. It helps me on GWT Bootstrap! Thanks a lot

    • You’re absolutely welcome! ๐Ÿ™‚
      I’m glad to be helpful

  • person464

    thank you very much

  • Ben Baker

    Nice one Emanuele!

    This came in a real treat. Using your method really helps to centralise the HTML markup that you want to apply to the header/body of a popover. The alternative, repeating the markup for the close button in a data attributes on each element that triggers a popover, seemed very clunky.

    It would be great to take this a step further and take the close button markup out of the JS and into a (centralised) template tag.

    Thanks again ๐Ÿ˜‰

    • I absolutely love html5 template tag, but unfortunately the agency I actually work for does care about IE ๐Ÿ˜€

      Cheers!