Tooltip bootstrap tidak hilang setelah klik tombol & mouse pergi

Saya punya masalah dengan tooltip bootstrap: Saat saya mengklik tombol, tooltip tetap ada meskipun kursor berada di luar tombol. Saya telah melihat ke manual - tooltip Bootstrap dan jika saya mengklik tombol, saya melihat masalah yang sama. Apakah ada solusi untuk memperbaikinya? Baru saja mencoba di FF terbaru, IE.

Ini karena triggertidak disetel. Nilai default untuk trigger adalah 'hover focus', dengan demikian tooltip tetap terlihat setelah tombol diklik, sampai tombol lain diklik, karena tombol tersebut focused.

Jadi yang harus Anda lakukan adalah mendefinisikan triggersebagai 'hover'saja. Di bawah contoh yang sama yang telah Anda tautkan tanpa tooltips bertahan setelah tombol diklik:

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

contoh dokumen dalam biola -> http://jsfiddle.net/vdzvvg6o/

Saya tahu lebih dari satu tahun, tapi saya tidak bisa mendapatkan ini bekerja dengan contoh apapun di sini. Saya harus menggunakan yang berikut ini:

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

Ini juga menampilkan tooltip lagi saat mengarahkan kursor.

Hai, saya punya sedikit solusi untuk masalah ini. Ketika solusi lain tidak berhasil, coba yang ini:

$('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');
    });

Ini juga solusi untuk drag and drop. Jadi saya harap ini membantu seseorang :)

Dalam kasus saya, masalah ini direproduksi hanya di Internet Explorer: tidak peduli elemen mana (input, div dll ...) yang memiliki tooltip- jika diklik- tooltip tetap ditampilkan.

menemukan beberapa solusi di web yang merekomendasikan .hide () tooltip itu pada elemen Klik event- tetapi itu ide yang buruk- mengarahkan kembali ke elemen yang sama - membuatnya tetap tersembunyi ... dalam kasus saya

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

membuat semua keajaiban !!! - di mana .myToolTippedElement adalah elemen yang memiliki tooltip dariCourse ...

di sudut 7 dengan bootstrap 4 dan jquery saya menemukan ini dan berfungsi dengan baik. Saya menggunakan buang karena itu menghancurkan tidak menyembunyikan tooltip.

  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');
    });
   }

Coba gunakan rel="tooltip"alih-alih data-toggle="tooltip"yang berhasil dalam kasus saya. Saya menggunakan data-toggle="tooltip"dan juga mengatur kondisi pemicu sebagai hover yang tidak berfungsi dalam kasus saya. Ketika saya mengubah pemilih data saya, itu berhasil.

Kode HTML:

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

Kode JS // Keterangan alat $ ('. Btn'). Tooltip ({trigger: 'hover'});

Ini pasti akan menghapus tooltip yang macet.

Jawaban David di atas membantu memperbaiki masalah saya. Saya memiliki acara hover dan click di tombol. Firefox di MAC berperilaku seperti yang saya inginkan. Artinya, tampilkan keterangan alat saat mengarahkan kursor, jangan tampilkan keterangan alat untuk diklik. Di browser dan OS lain, Saat saya mengklik, tooltip akan muncul dan tetap seperti yang ditampilkan. Bahkan jika saya memindahkan mouse ke tombol lain untuk mengarahkan kursor. Inilah yang saya miliki:

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

Ini perbaikannya:

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

Anda juga dapat menambahkan:

onclick="this.blur()"

Solusi Kerja

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

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

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

Cara saya memperbaiki masalah ini adalah dengan menghapus tooltip di fungsi event klik menggunakan kode berikut:

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

Saya menggunakan tooltip bootstrap di cycle.js dan tidak satu pun cara di atas yang berhasil untuk saya.

Saya harus melakukan ini:

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');
}

Ini bekerja untuk saya:

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

});

Saya menonaktifkan tombol simpan secara dinamis, lalu masalahnya.

Di dalam fungsi siap dokumen Anda, gunakan ini

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

Solusi ini berhasil untuk saya.

$('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');
});

biola

Saya mencoba sebagian besar solusi yang diberikan dalam jawaban sebelumnya, tetapi tidak ada yang berhasil untuk saya.

Masalah saya ada di DataTable. Kode di bawah ini berfungsi untuk saya.

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'); }); }

Anda juga dapat menggunakan metode di bawah ini untuk menyembunyikan tooltip pada mouseleave , Seperti di bawah ini:

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

Dalam kasus saya untuk ini adalah perbaikannya:

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

Saya tidak mematuhi aturan ini dari dokumen Bootstrap:

Tooltip harus disembunyikan sebelum elemennya yang sesuai telah dihapus dari DOM.

Ini juga dapat dicapai di HTML dengan menambahkan berikut ini:

 data-trigger="hover"

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

Anda juga dapat menggunakan cara ini untuk versi lama karena jawaban yang diterima tidak berfungsi untuk saya dan saya menulis kode ini untuk diri saya sendiri dan berfungsi dengan baik.

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

Jika seseorang ingin menyiapkan keterangan alat yang akan muncul beberapa saat setelah diklik, inilah yang saya lakukan:

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

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

Penggunaan forced blur () berpotensi mengurangi pengalaman pengguna. Saya tidak akan melakukan itu. Saya menemukan bahwa menghapus "data-original-title" serta menghapus atribut "data-toggle" dan "title" berhasil untuk saya.

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