คำแนะนำเครื่องมือของ Bootstrap ไม่หายไปหลังจากคลิกปุ่มและวางเมาส์

ฉันมีปัญหากับคำแนะนำเครื่องมือของ bootstrap: เมื่อฉันคลิกที่ปุ่มคำแนะนำเครื่องมือจะยังคงอยู่แม้ว่าเคอร์เซอร์จะอยู่นอกปุ่มก็ตาม ฉันได้ดูคู่มือ - เคล็ดลับเครื่องมือของ Bootstrapแล้วและหากฉันคลิกที่ปุ่มต่างๆฉันพบปัญหาเดียวกัน มีวิธีแก้ไขปัญหานี้หรือไม่? เพิ่งลองใน FF, IE ล่าสุด

ทั้งนี้เนื่องจากtriggerไม่ได้ตั้งค่า ค่าเริ่มต้นสำหรับทริกเกอร์คือ'hover focus'ดังนั้นคำแนะนำเครื่องมือจะยังคงมองเห็นได้หลังจากคลิกปุ่มจนกว่าจะคลิกปุ่มอื่นเนื่องจากปุ่มดังfocusedกล่าวเป็น

ดังนั้นสิ่งที่คุณต้องทำคือกำหนดtriggerให้เป็น'hover'เท่านั้น ด้านล่างตัวอย่างเดียวกับที่คุณได้เชื่อมโยงโดยไม่มีคำแนะนำเครื่องมือหลังจากคลิกปุ่มแล้ว:

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

ตัวอย่างเอกสารในซอ -> http://jsfiddle.net/vdzvvg6o/

ฉันรู้ว่าอายุมากกว่าหนึ่งปี แต่ฉันไม่สามารถใช้สิ่งนี้กับตัวอย่างใด ๆ ที่นี่ได้ ฉันต้องใช้สิ่งต่อไปนี้:

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

นอกจากนี้ยังแสดงคำแนะนำเครื่องมืออีกครั้งเมื่อวางเมาส์เหนือ

สวัสดีฉันมีวิธีแก้ปัญหาเล็กน้อยสำหรับปัญหานี้ เมื่อโซลูชันอื่นใช้ไม่ได้ผลให้ลองวิธีนี้:

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

นี่เป็นวิธีแก้ปัญหาสำหรับการลากและวางด้วย ฉันหวังว่านี่จะช่วยใครสักคน :)

ในกรณีของฉันปัญหาเกิดขึ้นใน Internet Explorer เท่านั้น: ไม่ว่าองค์ประกอบใด (อินพุต, div ฯลฯ ... ) จะมีคำแนะนำเครื่องมือหากคลิกแล้ว - คำแนะนำเครื่องมือยังคงแสดงอยู่

พบวิธีแก้ปัญหาบางอย่างบนเว็บที่แนะนำ. ซ่อน () คำแนะนำเครื่องมือนั้นเกี่ยวกับองค์ประกอบคลิกเหตุการณ์ - แต่มันเป็นความคิดที่ไม่ดี - กลับไปที่องค์ประกอบเดียวกัน - ซ่อนไว้ ... ในกรณีของฉัน

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

สร้างความมหัศจรรย์ทั้งหมด !!! - โดยที่. myToolTippedElement เป็นองค์ประกอบที่มีคำแนะนำของหลักสูตร ...

ในเชิงมุม 7 พร้อม bootstrap 4 และ jquery ฉันพบสิ่งนี้และใช้งานได้ดี ฉันใช้การกำจัดเพราะมันทำลายไม่ได้ซ่อนคำแนะนำเครื่องมือ

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

ลองใช้rel="tooltip"แทนdata-toggle="tooltip"สิ่งที่ได้ผลในกรณีของฉัน ฉันใช้ data-toggle="tooltip"และตั้งเงื่อนไขทริกเกอร์เป็นโฮเวอร์ซึ่งไม่ได้ผลในกรณีของฉัน เมื่อฉันเปลี่ยนตัวเลือกข้อมูลก็ใช้งานได้

รหัส HTML:

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

รหัส JS // Tooltip $ ('. btn'). tooltip ({trigger: 'hover'});

สิ่งนี้จะลบคำแนะนำเครื่องมือที่ติดอยู่ออกไปอย่างแน่นอน

คำตอบของเดวิดข้างต้นช่วยแก้ไขปัญหาของฉัน ฉันมีทั้งเหตุการณ์ที่วางเมาส์และคลิกบนปุ่ม Firefox บน MAC ทำงานได้ตามที่ฉันต้องการ นั่นคือแสดงคำแนะนำเครื่องมือเมื่อวางเมาส์ไม่ต้องแสดงคำแนะนำเครื่องมือสำหรับการคลิก บนเบราว์เซอร์และระบบปฏิบัติการอื่น ๆ เมื่อฉันคลิกคำแนะนำเครื่องมือจะปรากฏขึ้นและอยู่ตามที่แสดง แม้ว่าฉันจะเลื่อนเมาส์ไปที่ปุ่มอื่นเพื่อวางเมาส์ นี่คือสิ่งที่ฉันมี:

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

นี่คือการแก้ไข:

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

นอกจากนี้คุณสามารถเพิ่ม:

onclick="this.blur()"

โซลูชันการทำงาน

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

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

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

วิธีที่ฉันแก้ไขปัญหานี้คือการลบคำแนะนำเครื่องมือในฟังก์ชันคลิกเหตุการณ์โดยใช้รหัสต่อไปนี้:

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

ฉันใช้คำแนะนำเครื่องมือ bootstrap ใน cycle.js และไม่มีวิธีใดที่ใช้ได้ผลสำหรับฉัน

ฉันต้องทำสิ่งนี้:

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

สิ่งนี้ใช้ได้กับฉัน:

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

});

ฉันปิดการใช้งานปุ่มบันทึกแบบไดนามิกแล้วปัญหาคือ

ภายในฟังก์ชันพร้อมใช้งานเอกสารของคุณให้ใช้สิ่งนี้

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

วิธีนี้ใช้ได้ผลสำหรับฉัน

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

ซอ

ฉันลองใช้วิธีแก้ปัญหาส่วนใหญ่ที่ให้ไว้ในคำตอบก่อนหน้านี้ แต่ไม่มีวิธีใดได้ผลสำหรับฉัน

ปัญหาของฉันอยู่ใน DataTable รหัสด้านล่างใช้ได้กับฉัน

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

คุณยังสามารถใช้วิธีการด้านล่างเพื่อซ่อนคำแนะนำเครื่องมือบนmouseleaveดังต่อไปนี้:

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

ในกรณีของฉันสำหรับสิ่งนี้คือการแก้ไข:

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

ฉันไม่ได้ปฏิบัติตามกฎนี้จากเอกสาร Bootstrap:

ต้องซ่อนคำแนะนำเครื่องมือก่อนที่จะนำองค์ประกอบที่เกี่ยวข้องออกจาก DOM

สิ่งนี้สามารถทำได้ใน HTML โดยเพิ่มสิ่งต่อไปนี้:

 data-trigger="hover"

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

นอกจากนี้คุณสามารถใช้วิธีนี้กับเวอร์ชันเก่าได้เนื่องจากคำตอบที่ยอมรับไม่ได้ผลสำหรับฉันและฉันเขียนโค้ดนี้เพื่อตัวฉันเองและมันก็ใช้ได้ดี

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

หากมีคนต้องการตั้งค่าคำแนะนำเครื่องมือซึ่งจะแสดงเป็นระยะเวลาหนึ่งหลังจากคลิกนี่คือวิธีที่ฉันทำ:

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

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

การใช้การบังคับเบลอ () มีศักยภาพในการลดประสบการณ์ของผู้ใช้ ฉันจะไม่ทำอย่างนั้น ฉันพบว่าการลบ "data-original-title" รวมทั้งการลบแอตทริบิวต์ "data-toggle" และ "title" นั้นใช้ได้ผลกับฉัน

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