Dynamically change content of popover in bootstrap

I am trying to change the content of bootstrap popover dynamically but it is not working. Fiddler: https://jsfiddle.net/99x50s2s/62/

HTML:

<button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button" data-toggle="popover" data-trigger="manual" data-content="There are no changes to save."><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

JS:

$('#SaveChangesBtn').on('click', function(){
    $(this).popover('hide');
    $(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');        
});

Current Result:

When Save changes button is clicked, the content ‘There are no changes to save’ is displayed.

Expectation:

The dynamic content “Cannot proceed with Save while Editing a row.” should be displayed.

Any help is appreciated.

Answer

You can try something like this:

$('#SaveChangesBtn').on('click', function(){
if($('.popover').hasClass('in')){
    $(this).popover('hide');
}
else
{
    $(this).attr('data-content','Cannot proceed with Save while Editing a row.');
    $(this).popover('show');
}
});

This way you fix the way you are showing and hiding your popover.

Working fiddle: https://jsfiddle.net/99x50s2s/65/