How to insert HTML elements inside a Tooltip Bootstrap?

I have a piece of code to generate a tootip using bootstrap.

var msg ="Oops! This is a test message";
$('#addItInfo').attr('data-original-title',msg);
$('#addItInfo').tooltip('show');
setTimeout( function(){ 
   $('#addItInfo').tooltip('hide');
   $('#addItInfo').removeAttr('title');
   $('#addItInfo').removeAttr('data-original-title'); 
}  , 2500 ); //Wait 2,5 seconds

This code works good, but imagine that instead of a simply message I want tho display a table with some data. I've try to create a <table> element inside the var msg like this:

var msg ="<table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>";

I was expecting to see a table inside the tootip but what I got was the string <table><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr></table>.

Here in this example I am using the same idea but without bootstrap. It works, with some minors issues, that I can solve later.

For now my question is how to allow bootstrap to display any HTML element inside the tooltip? I took a look at the documentation, but I found nothing related.

Solution

You are missing data-html="true" on the trigger element. Its is documented.

Html option - defaults to false. Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

Working fiddle