A dica de ferramenta do bootstrap não desaparece após clicar no botão e sair do mouse

Eu tenho um problema com a dica de ferramenta do bootstrap: quando eu clico em um botão, a dica de ferramenta permanece mesmo se o cursor estiver fora do botão. Eu olhei no manual - dica de ferramenta do Bootstrap e se estou clicando nos botões, vejo o mesmo problema. Existe alguma solução para corrigir isso? Apenas tentei no último FF, IE.

Isso ocorre porque triggernão está definido. O valor padrão para o gatilho é 'hover focus', portanto, a dica de ferramenta permanece visível depois que um botão é clicado, até que outro botão seja clicado, porque o botão é focused.

Portanto, tudo o que você precisa fazer é definir triggercomo 'hover'único. Abaixo do mesmo exemplo ao qual você vinculou sem persistir dicas de ferramentas depois que um botão é clicado:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

o exemplo de documento em um violino -> http://jsfiddle.net/vdzvvg6o/

Eu sei que há mais de um ano, mas não consegui fazer isso funcionar com nenhum exemplo aqui. Tive que usar o seguinte:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Isso também mostra a dica de ferramenta novamente ao passar o mouse.

Oi, eu tenho pouca solução para esse problema. Quando outras soluções não funcionarem, tente esta:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

Esta é a solução para arrastar e soltar também. Espero que isso ajude alguém :)

No meu caso, o problema foi reproduzido apenas no Internet Explorer: não importa qual elemento (entrada, div etc ...) tem a dica de ferramenta - se clicado - a dica de ferramenta permanece exibida.

encontrei algumas soluções na web que recomendam .hide () que dica sobre os elementos Click event - mas é uma má ideia - voltar ao mesmo elemento - o mantém escondido ... no meu caso

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

fez toda a mágica !!! - onde .myToolTippedElement é o elemento que tem uma dica de ferramenta do curso ...

no angular 7 com bootstrap 4 e jquery eu achei isso e funciona bem. Usei descartar porque destrói não esconde a dica.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Tente usar em rel="tooltip"vez do data-toggle="tooltip"que funcionou no meu caso. Eu estava usando data-toggle="tooltip"e também defini a condição de gatilho como pairar, o que não funcionou no meu caso. Quando mudei meu seletor de dados, funcionou.

Código HTML:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

Código JS // Tooltip $ ('. Btn'). Tooltip ({trigger: 'hover'});

Isso definitivamente removerá a dica de ferramenta presa.

A resposta de David acima ajudou a resolver meu problema. Passei o mouse e cliquei no evento do botão. O Firefox no MAC se comportou como eu queria. Ou seja, mostrar dica de ferramenta ao passar o mouse, não mostrar dica de ferramenta para clique. Em outros navegadores e sistemas operacionais, quando eu clico, a dica de ferramenta aparece e permanece como mostrada. Mesmo se eu mover o mouse para outros botões para pairar. Isso é o que eu tinha:

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

Esta é a solução:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

Você também pode adicionar:

onclick="this.blur()"

Solução de Trabalho

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

A maneira como eu corrigi esse problema foi removendo a dica de ferramenta na função de evento de clique usando o seguinte código:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Estou usando a dica de ferramenta de bootstrap em cycle.js e nenhuma das opções acima funcionou para mim.

Eu tive que fazer isso:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Isso funciona para mim:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Eu estava desativando o botão Salvar dinamicamente, então o problema estava.

Dentro de sua função de documento pronto, use este

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

Essa solução funcionou para mim.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

rabeca

Tentei a maioria das soluções fornecidas nas respostas anteriores, mas nenhuma delas funcionou para mim.

Meu problema está no DataTable. O código abaixo funciona para mim.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }

Você também pode usar o método abaixo para ocultar a dica de ferramenta na página do mouse , conforme abaixo:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

No meu caso, isso foi a solução:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

Eu não estava obedecendo a essa regra dos documentos do Bootstrap:

As dicas de ferramentas devem ser ocultadas antes que seus elementos correspondentes sejam removidos do DOM.

Isso também é possível no HTML adicionando o seguinte:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Além disso, você pode usar essa maneira para versões antigas porque a resposta aceita não funcionou para mim e eu escrevi este código para mim e funciona bem.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

Se alguém quiser configurar uma dica de ferramenta que aparecerá por algum tempo após o clique, aqui está como eu fiz:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

Usar um desfoque forçado () tem a potencialidade de reduzir a experiência do usuário. Eu não faria isso. Descobri que remover o "data-original-title", bem como remover os atributos "data-toggle" e "title" funcionou para mim.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");