JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js?"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<html>
<body style="padding:50px">
<a data-original-title="Cool, an easy status tooltip">This will change in 2 seconds.</a>
</body>
</html>
JavaScript
// 3 lines to get bootstrap tooltips working anywhere in the
// document regardless of state or inclusion time within the DOM.
$('body').on("mouseover", "a[data-original-title]", function(event){
$(this).tooltip('show');
});
// Sidenote: With a few more lines we could take advantage of title=""
// instead of data-original-title="" and have it update as expected.
// == Examples ==
// Adding an element .5 seconds after load
setTimeout(function(){
$('body').append($("<br /><a data-original-title='tooltip! (another link 1)'>another link1</a>"));
}, 500);
// Adding an element 1.5 seconds after load
setTimeout(function(){
$('body').append($("<br /><a data-original-title='another link 2!'>another link2</a>"));
}, 1500);
// Changing the title of the first anchor on the fly 2 seconds after load.
setTimeout(function(){
$('a').eq(0).text('new title').attr('data-original-title','new title');
}, 2000);