title: Dynamically change content of popover in bootstrap
body: <p>I am trying to change the content of bootstrap popover dynamically but it is not working. 
  Fiddler: <a href="https://jsfiddle.net/99x50s2s/62/" rel="noreferrer">https://jsfiddle.net/99x50s2s/62/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;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."&gt;&lt;span class="glyphicon glyphicon-floppy-save" aria-hidden="true"&gt;&lt;/span&gt;&amp;nbspSave Changes&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#SaveChangesBtn').on('click', function(){
      $(this).popover('hide');
      $(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');        
  });
  </code></pre>
  
  <p><strong>Current Result:</strong></p>
  
  <p>When Save changes button is clicked, the content 'There are no changes to save' is displayed.</p>
  
  <p><strong>Expectation:</strong></p>
  
  <p>The dynamic content "Cannot proceed with Save while Editing a row." should be displayed.</p>
  
  <p>Any help is appreciated.</p>