Chú giải công cụ của Bootstrap không biến mất sau khi nhấp vào nút và di chuyển

Tôi gặp sự cố với chú giải công cụ của bootstrap: Khi tôi nhấp vào một nút, chú giải công cụ vẫn ở ngay cả khi con trỏ ở bên ngoài nút. Tôi đã xem hướng dẫn sử dụng - chú giải công cụ của Bootstrap và nếu tôi nhấp vào các nút, tôi thấy vấn đề tương tự. Có giải pháp nào để khắc phục điều này không? Vừa thử trong FF, IE mới nhất.

Điều này là do triggerkhông được thiết lập. Giá trị mặc định cho trình kích hoạt là 'hover focus', do đó chú giải công cụ vẫn hiển thị sau khi một nút được nhấp, cho đến khi một nút khác được nhấp, vì nút đó focused.

Vì vậy, tất cả những gì bạn phải làm là xác định triggerlà 'hover'duy nhất. Dưới cùng một ví dụ mà bạn đã liên kết đến mà không có chú giải công cụ liên tục sau khi một nút được nhấp:

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

ví dụ doc trong fiddle -> http://jsfiddle.net/vdzvvg6o/

Tôi biết hơn một năm tuổi, nhưng tôi không thể làm cho điều này hoạt động với bất kỳ ví dụ nào ở đây. Tôi đã phải sử dụng những thứ sau:

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

Điều này cũng hiển thị lại chú giải công cụ khi di chuột.

Xin chào, tôi có chút giải pháp cho vấn đề này. Khi các giải pháp khác không hoạt động, chỉ cần thử giải pháp này:

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

Đây cũng là giải pháp kéo và thả. Vì vậy, tôi hy vọng điều này sẽ giúp ai đó :)

Trong trường hợp của tôi, sự cố chỉ được tái tạo trong Internet Explorer: bất kể phần tử nào (đầu vào, div, v.v.) có chú giải công cụ - nếu được nhấp vào - chú giải công cụ vẫn hiển thị.

đã tìm thấy một số giải pháp trên web đề xuất .hide () rằng chú giải công cụ trên các phần tử Nhấp vào sự kiện- nhưng đó là ý tưởng tồi - di chuột trở lại cùng một phần tử - giữ nó ẩn ... trong trường hợp của tôi

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

đã làm nên tất cả điều kỳ diệu !!! - trong đó .myToolTippedElement là phần tử có chú giải công cụ củaCourse ...

trong góc 7 với bootstrap 4 và jquery, tôi tìm thấy điều này và nó hoạt động tốt. Tôi đã sử dụng tính năng hủy bỏ vì nó hủy bỏ không ẩn chú giải công cụ.

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

Hãy thử sử dụng rel="tooltip"thay vì data-toggle="tooltip"đã hoạt động trong trường hợp của tôi. Tôi đang sử dụng data-toggle="tooltip"và cũng đặt điều kiện kích hoạt là di chuột mà không hoạt động trong trường hợp của tôi. Khi tôi thay đổi bộ chọn dữ liệu của mình, nó đã hoạt động.

Mã HTML:

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

Mã JS // Chú giải công cụ $ ('. Btn'). Chú giải công cụ ({trigger: 'hover'});

Điều này chắc chắn sẽ loại bỏ chú giải công cụ bị kẹt.

Câu trả lời của David ở trên đã giúp khắc phục sự cố của tôi. Tôi đã có cả sự kiện di chuột và nhấp vào nút. Firefox trên MAC đã hoạt động như tôi muốn. Tức là hiển thị chú giải công cụ khi di chuột, không hiển thị chú giải công cụ khi nhấp chuột. Trên các trình duyệt và hệ điều hành khác, Khi tôi nhấp vào, chú giải công cụ sẽ xuất hiện và giữ nguyên như hiển thị. Ngay cả khi tôi di chuyển chuột đến các nút khác để di chuột. Đây là những gì tôi đã có:

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

Đây là bản sửa lỗi:

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

Ngoài ra bạn có thể thêm:

onclick="this.blur()"

Giải pháp làm việc

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

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

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

Cách tôi khắc phục sự cố này là bằng cách xóa chú giải công cụ trong hàm sự kiện nhấp chuột bằng cách sử dụng mã sau:

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

Tôi đang sử dụng chú giải công cụ bootstrap trong cycle.js và không có cách nào ở trên phù hợp với tôi.

Tôi phải làm điều này:

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

Điều này phù hợp với tôi:

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

});

Tôi đã vô hiệu hóa nút lưu động thì vấn đề là.

Bên trong tài liệu của bạn sẵn sàng, sử dụng chức năng này

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

Giải pháp này đã làm việc cho tôi.

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

vĩ cầm

Tôi đã thử hầu hết các giải pháp được đưa ra trong các câu trả lời trước đó, nhưng không có giải pháp nào phù hợp với tôi.

Vấn đề của tôi là trong DataTable. Mã dưới đây phù hợp với tôi.

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

Bạn cũng có thể sử dụng phương pháp dưới đây để ẩn chú giải công cụ trên mouseleave , Như bên dưới:

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

Trong trường hợp của tôi cho điều này là cách khắc phục:

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

Tôi đã không tuân theo quy tắc này từ tài liệu Bootstrap:

Chú giải công cụ phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM.

Điều này cũng có thể đạt được trong HTML bằng cách thêm những thứ sau:

 data-trigger="hover"

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

Ngoài ra, bạn có thể sử dụng cách này cho các phiên bản cũ vì câu trả lời được chấp nhận không hoạt động với tôi và tôi đã viết mã này cho bản thân tôi và nó hoạt động tốt.

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

Nếu ai đó muốn thiết lập một chú giải công cụ sẽ hiển thị một lúc sau khi nhấp chuột, đây là cách tôi đã làm:

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

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

Sử dụng làm mờ bắt buộc () có khả năng làm giảm trải nghiệm người dùng. Tôi sẽ không làm điều đó. Tôi nhận thấy rằng việc xóa "data-original-title" cũng như xóa các thuộc tính "data-toggle" và "title" đã hiệu quả với tôi.

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