How to insert HTML elements in a bootstip Tooltip?

Question

How to insert HTML elements in a bootstip Tooltip?

Navigation

#1 by (2 votes)

2

I have a code that generates a tooltip with a small message and makes it 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 fine, however I would like to dynamically insert HTML elements within this tooltip, so I can bring some information from the database when the user hovers the mouse in the element that contains the tooltip. I ran a test with a div and so I turned this message off just for testing:

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

Unfortunately the tooltip element does not make the 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 (just to test if it is possible ) and that it is not well formatted (it has other problems).

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

bootstrap-3 tooltip

asked by anonymous 26.05.2016 / 20:33

1 answer

Download files by link (url) Android Callback logic

score 2 · Accepted Answer

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 it's best to use 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>