Bootstrap'in araç ipucu, düğmeye tıkladıktan ve fare kaydettikten sonra kaybolmuyor

Bootstrap'ın araç ipucuyla ilgili bir sorunum var: Bir düğmeye tıkladığımda, imleç düğmenin dışında olsa bile araç ipucu kalıyor. Kılavuza baktım - Bootstrap'ın araç ipucu ve düğmelere tıklıyorsam aynı sorunu görüyorum. Bunu düzeltmek için herhangi bir çözüm var mı? En son FF, IE'de denedim.

Bunun nedeni triggerbelirlenmemiş olmasıdır. Tetikleyici için varsayılan değer 'hover focus', bu nedenle araç ipucu bir düğme tıklandıktan sonra başka bir düğme tıklanana kadar görünür kalır, çünkü düğme tıklanır focused.

Yani tek yapmanız gereken sadece triggerolarak tanımlamak 'hover'. Bir düğmeye tıklandıktan sonra araç ipuçları kalmadan bağladığınız aynı örneğin altında:

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

keman içindeki doc örneği -> http://jsfiddle.net/vdzvvg6o/

Bir yaşın üzerindeyim biliyorum ama bunu burada hiçbir örnekle çalıştıramadım. Aşağıdakileri kullanmak zorunda kaldım:

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

Bu, üzerine gelindiğinde araç ipucunu tekrar gösterir.

Merhaba bu sorun için küçük bir çözümüm var. Diğer çözümler işe yaramadığında sadece şunu deneyin:

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

Bu, sürükle ve bırak için de bir çözümdür. Umarım bu birine yardımcı olur :)

Benim durumumda sorun yalnızca Internet Explorer'da yeniden oluşturuldu: hangi öğenin (girdi, div vb.) Araç ipucu olduğu önemli değil - tıklandığında araç ipucu gösterilmeye devam ediyor.

web'de .hide () öğelerine ilişkin araç ipucunu öneren bazı çözümler buldum Click olayı - ancak bu kötü bir fikir - aynı öğeye geri dönmek - onu gizli tutuyor ... benim durumumda

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

tüm sihri yaptı !!! - burada .myToolTippedElement, Ders için bir araç ipucuna sahip olan öğedir ...

bootstrap 4 ve jquery ile açısal 7'de bunu buldum ve iyi çalışıyor. Dispose kullandım çünkü yok eder araç ipucunu gizlemez.

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

Benim durumumda işe yarayan rel="tooltip"yerine kullanmayı deneyin data-toggle="tooltip". Kullanıyordum data-toggle="tooltip"ve ayrıca tetikleme koşulunu, benim durumumda çalışmayan vurgulu olarak ayarladım. Veri seçicimi değiştirdiğimde işe yaradı.

HTML Kodu:

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

JS Kodu // Araç ipucu $ ('. Btn'). Araç ipucu ({tetik: 'üzerine gelme'});

Bu, sıkışmış ipucunu kesinlikle kaldıracaktır.

David'in yukarıdaki cevabı sorunumu çözmemde yardımcı oldu. Düğmede hem fareyle üzerine gelme hem de tıklama olayım vardı. MAC üzerindeki Firefox istediğim gibi davrandı. Yani, fareyle üzerine gelindiğinde araç ipucunu göster, tıklama için araç ipucunu gösterme. Diğer tarayıcılarda ve işletim sistemlerinde, tıkladığımda, araç ipucu görünüyor ve gösterildiği gibi kalıyor. Fareyi gezinmek için diğer düğmelere götürsem bile. Sahip olduğum şey buydu:

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

Düzeltme şudur:

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

Ayrıca şunları ekleyebilirsiniz:

onclick="this.blur()"

Çalışma Çözümü

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

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

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

Bu sorunu çözme şeklim, aşağıdaki kodu kullanarak tıklama olay işlevindeki araç ipucunu kaldırmaktı:

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

Cycle.js'de bootstrap araç ipucunu kullanıyorum ve yukarıdakilerin hiçbiri benim için işe yaramadı.

Bunu yapmak zorundaydım:

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

Bu benim için çalışıyor:

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

});

Kaydet düğmesini dinamik olarak devre dışı bırakıyordum, o zaman sorun oldu.

Belgenizin hazır işlevinin içinde bunu kullanın

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

Bu çözüm benim için çalıştı.

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

Vaktini boşa harcamak

Önceki cevaplarda verilen çözümlerin çoğunu denedim ama hiçbiri benim için işe yaramadı.

Benim sorunum DataTable'da. Aşağıdaki kod benim için çalışıyor.

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

Ayrıca , aşağıdaki gibi , fare çubuğunda araç ipucunu gizlemek için aşağıdaki yöntemi de kullanabilirsiniz :

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

Benim durumumda bunun düzeltilmesi:

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

Bootstrap belgelerinden bu kurala uymuyordum:

Araç ipuçları, ilgili öğeleri DOM'dan kaldırılmadan önce gizlenmelidir.

Bu, aşağıdakilerin eklenmesiyle HTML'de de elde edilebilir:

 data-trigger="hover"

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

Ayrıca eski sürümler için de bu yolu kullanabilirsiniz çünkü kabul edilen cevap benim için işe yaramadı ve bu kodu kendim ve onun çalışması için yazdım.

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

Birisi tıkladıktan sonra bir süre gösterilecek bir araç ipucu ayarlamak istiyorsa, işte böyle yaptım:

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

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

Zorunlu bulanıklaştırma () kullanmak, kullanıcı deneyimini azaltma potansiyeline sahiptir. Ben yapmam. "Data-original-title" ve "data-toggle" ve "title" özelliklerini kaldırmanın benim için işe yaradığını buldum.

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