How to insert HTML elements into a Tooltip Bootsrap?

Question

I have a code that generates a tooltip with a small message and makes disappear after 2.5s.

var msg ="Oops! Essa é uma mensagem pequena";
$('#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  

The code works well, however I would like to dynamically insert some HTML elements inside this tooltip, so I can bring some database information when the user hovers the mouse on the element that contains the tooltip. I took a test with a div and so I created this message just for test:

var msg ="Essa é uma mensagem teste <div>elemento div interno</div>";

Unfortunately the tooltip element does not display as expected.

Here is a small example of how I would like it. In this example I inserted a table inside the tooltip that is not bootstrap (only to test if it is possible) and that it is not well formatted (has other problems).

So my question is: how to insert html elements inside a bootstrap tootip? Any ideas?

Answer 1

Answer to your question (JSFIDDLE):

$('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true,
    title: $('#tooltip-table').html(),
    placement: 'right'
});

.tooltip, .tooltip-inner {
    min-width: 320px !important;
    width: 320px !important;
}

<div class="container">
    <a data-toggle="tooltip" href="javascript:;">Tooltip</a>
    
    <div id="tooltip-table" class="hide">
        <table class="table table-bordered" style="width: 300px;">
            <caption>Monthly savings</caption>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                 <td>February</td>
                 <td>$50</td>
             </tr>
        </table>
    </div>
</div>

Tip: I think I’d better use the popover(JSFIDDLE):

$('[data-toggle=popover]').popover({
   content: $('#popover-table').html(),
   html: true,
   trigger: 'hover'
});

<div class="container">
    <h3>Exemplo de <i>popover</i> com elementos HTML</h3>
    <a href="javascript:;" data-toggle="popover">
        <span>Popover</span>
    </a>

    <div id="popover-table" class="hide">
        <table class="table table-bordered">
            <caption>Monthly savings</caption>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                 <td>February</td>
                 <td>$50</td>
             </tr>
        </table>
    </div>
    
</div>