JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<br><br>
<button id="wrong" class="btn btn-inverse">Click me before 3 seconds</button>
<br><br>
<button id="right" class="btn btn-inverse">Click me before 6 seconds</button>
JavaScript
$('#wrong').popover({
title: 'When finished loading, arrow will be off target',
content: 'Loading...'
});
$('#right').popover({
title: 'When finished loading, will reposition correctly',
content: 'Loading...'
});
var popover = $('button').data('popover');
setTimeout(function() {
$('#wrong').attr('data-content', 'hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello');
var popover = $('#wrong').data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
},3000);
setTimeout(function() {
$('#right').attr('data-content', 'hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello');
var popover = $('#right').data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($("#right").next('div.popover:visible').length){
popover.show();
}
},6000);