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?
popover
seria mais apropriado para o que você quer. Basta ativá-lo no hover.trigger: 'hover'