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'm write your code isn't show your popup.

anyone come across this problem?

Answer 1

You need to make the markup right

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

Then, one way is to attach the close-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 multiple popovers and in Bootstrap 3.

Here's what I did:

I had multiple elements I wanted to have a popover work for, so I didn't want to use ids.

The markup could 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 content for 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 the javascript for all 3 buttons:

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

$('.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 'body'

Then, use the aria-describedby 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');     }); });