dev [JQuery] ~ 1. - Resolvendo problema de Tooltip em elemento dinamicamente adicionado.

[Pica-Pau]

 

Resolvendo problema de Tooltip

em elemento dinamicamente adicionado.

 

Mas... Que tal "problema" é esse ?

Estava fazendo um site, esse site tem um "modal" entitulado "Regras", só que, este modal

é um arquivo .html externo. Ou seja ele não está direto na página.

 

Ao clicar de um botão eu executo uma função para importar esse arquivo

para a página abrindo-o.

 

Dentro desse "modal" tem um "tooltip". Creio que você já saiba oque é um tooltip.

Se você importar a função do tooltip na página que você está e não na dinamicamente adicionada

ela só ira funcionar na sua página.

 

E então, como resolvo esse problema ?

A Função do tooltip atualmente na documentação do Bootstrap está assim:

$(function() {

  $('[data-toggle="tooltip"]').tooltip();

});

Porém ele só ira funcionar se você trocar esta função acima, pela abaixo ou semelhantes.

$(document).on('mouseenter','[data-toggle="tooltip"]', function(){

    $(this).tooltip('show');

});



$(document).on('mouseleave','[data-toggle="tooltip"]', function(){

    $(this).tooltip('hide');

});

$(document).on('mouseover', '[data-toggle="tooltip"]', function() {

  $(this).tooltip('toggle');

});

$('[data-toggle="tooltip"]).on('mouseover', function() {

  $(this).tooltip('toggle');

});

Espero ter ajudado quem estava com esse problema como eu

Valeu galera, um tutorialzinho só pra distrair né, até a próxima :)