2

Eu tenho um código que gera um tooltip com uma pequena mensagem e faz desaparecer depois de 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  

O código funciona direito, porém eu gostaria de inserir dinamicamente uns elementos HTML dentro desse tooltip, assim, posso trazer algumas informações do banco de dados quando o usuário passa o mouse no elemnto que contém o tooltip. Fiz um teste com uma div e assim cirei essa mensagem só para teste:

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

Infelizmente o elemento tooltip não faz o display como esperado.

Aqui está um pequeno exemplo de como eu gostaria. Nesse exemplo eu inseri uma tabela dentro do tooltip que não é bootstrap (só para testar se é possível) e que não está bem formatada (possui outros problemas).

Então a minha pergunta é: como inserir elementos html dentro de um tootip bootstrap? Alguma idéia?

2
  • popover seria mais apropriado para o que você quer. Basta ativá-lo no hover. trigger: 'hover'
    – dap.tci
    Commented 26/05/2016 às 22:42
  • Sim dap.tci, eu estava mesmo procurando uma outra maneira de apresentar esses dados e popover parece ser o que eu procurava. Vou fazer os meus testes com o tooltip, mas vou ficar mesmo [e com o popover. Valeu!
    – IgorAlves
    Commented 27/05/2016 às 1:07

1 Resposta 1

2

Resposta pra sua pergunta (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>

Sugestão: acho melhor usar o 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>

4
  • 1
    Valeu Eduardo, vc até melhorou a segunda parte do código. Realmente o popover é mais apropriado.
    – IgorAlves
    Commented 27/05/2016 às 1:10
  • 1
    Fico feliz em ter ajudado! Boa sorte!!! Commented 27/05/2016 às 1:12
  • Mas só para deixar documentado para quem precisar depois eu encontrei uma outra maneira de ativar o display de html na tooltip. Basta inserir data-html="true" no elemento que vai mostrar o tooltip. Estava na documentação oficial e eu não vi. getbootstrap.com/javascript/#tooltips
    – IgorAlves
    Commented 27/05/2016 às 1:14
  • 1
    Ah, sim!!! É que esse método usando os atributos data- é melhor quando você usa o HTML puro. Para "centralizar" a programação que usa JS, eu coloquei tudo no JQuery. Perceba que eu poderia usar tudo diretamente dentro do HTML, mas você teria um código horrível, difícil de ler. Commented 27/05/2016 às 1:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .