Bootstrap 的工具提示在单击按钮和鼠标离开后不会消失

Question

我对 bootstrap 的工具提示有疑问：当我单击按钮时，即使光标在按钮之外，工具提示也会保留。我查看了手册 - Bootstrap's tooltip，如果我点击按钮，我会看到同样的问题。有解决办法吗？刚刚在最新的 FF、IE 中试过。

Answer 1

这是因为trigger没有设置。触发器的默认值为 'hover focus'，因此在单击按钮后工具提示保持可见，直到单击另一个按钮，因为按钮是 focused。

因此您只需将 trigger 定义为 'hover' 即可。在您链接到的同一示例下方，单击按钮后没有保留工具提示：

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

文档示例 fiddle -> http://jsfiddle.net/vdzvvg6o/

Answer 2

就我而言，问题仅在 Internet Explorer 中重现：无论哪个元素（输入、div 等...）都有工具提示 - 如果单击 - 工具提示仍然显示。

在网络上找到了一些推荐 .hide() 元素点击事件工具提示的解决方案 - 但这是个坏主意 - 悬停回到同一元素 - 使其隐藏...... 就我而言

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

创造了所有的魔力！！！- 其中 .myToolTippedElement 是具有工具提示 ofCourse 的元素...

Answer 3

我知道一岁多了，但我无法在此处使用任何示例。我不得不使用以下内容：

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

悬停时也会再次显示工具提示。

Answer 4

尝试使用 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代码 //工具提示 $('.btn').tooltip({ 触发器：'hover' });

这肯定会删除卡住的工具提示。

Answer 5

David 的上述回答帮助解决了我的问题。我在按钮上有悬停和单击事件。 MAC 上的 Firefox 确实如我所愿。也就是说，悬停时显示工具提示，点击时不显示工具提示。在其他浏览器和 OS 上，当我单击时，工具提示出现并保持显示状态。即使我将鼠标移动到其他按钮进行悬停。这是我的：

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

这是修复：

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

Answer 6

您好，我对这个问题没有什么解决办法。当其他解决方案不起作用时，试试这个：

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

这也是拖放的解决方案。所以我希望这对某人有所帮助:)

Answer 7

我在 cycle.js 中使用 bootstrap 工具提示，上面的 none 对我有用。

我必须这样做：

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

Answer 8

这对我有用：

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

});

我正在动态禁用保存按钮然后问题就来了。

Answer 9

我解决这个问题的方法是使用以下代码删除点击事件函数中的工具提示：

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

Answer 10

您还可以添加：

onclick="this.blur()"

Answer 11

这个解决方案对我有用。

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

fiddle

我尝试了之前答案中给出的大部分解决方案，但其中 none 对我有用。

Answer 12

我的问题出在 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');
    });
}

Answer 13

你也可以使用下面的方法隐藏mouseleave的工具提示，如下：

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

Answer 14

in angular 7 with bootstrap 4 and jquery 我发现了这个并且工作正常。我使用 dispose 是因为它会破坏并不会隐藏工具提示。

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

Answer 15

就我而言，解决方法是：

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

我没有遵守 Bootstrap 文档中的这条规则：

Tooltips must be hidden before their corresponding elements have been removed from the DOM.

Answer 16

工作解决方案

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

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

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

Answer 17

这也可以通过添加以下内容在 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>

Answer 18

您也可以对旧版本使用这种方式，因为已接受的答案对我不起作用，我为自己编写了这段代码并且效果很好。

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

Answer 19

如果有人想设置一个工具提示，点击后会显示一段时间，我是这样做的：

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

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

Answer 20

使用强制 blur() 可能会降低用户体验。我不会那样做。我发现删除“data-original-title”以及删除属性“data-toggle”和“标题”对我有用。

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

Answer 21

使用授权使其ajax友好，

// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {  
  // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
  $('body').tooltip({
    select: "[data-toggle='tooltip']"
  });

  // remove old tooltip from sticking on the page when calling ajax with turbolinks
  $('body').on('click', "[data-toggle='tooltip']", function() {
    $(this).tooltip('dispose');
  });
});

Answer 22

我在使用 Safari iPhone 时遇到了 Bootstrap 4 的问题。

在 PC/Desktop，工具提示效果很好。但是当查看 iPhone 和 iOS 14 时，在单击/点击按钮后，工具提示仍然可见。隐藏图层时也是如此。

对我来说，添加这段代码解决了 iPhone 上的问题：

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

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

Answer 23

和Bootstrap5

工具提示现已在 plain/vanilla Javascript 中初始化。因为我在这里只看到 JQuery 选项，所以让我 post 在普通 JS 中使用非常简单直接的方法：

//Initialize bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map( function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
  trigger : 'hover'
  });
});

您只需添加“{trigger : 'hover'}”对象作为 bootstrap.Tooltip(element, options) 的选项。

来源：https://getbootstrap.com/docs/5.1/components/tooltips/#usage

Answer 24

对我来说，只有当我输入这段代码时才有效。 P.S.: 我正在使用 Bootstrap 4.


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

Answer 25

如果没有效果，试试这个。 *在单击按钮或任何具有工具提示的元素时执行。

let tooltip = document.getElementsByClassName("tooltip");
tooltip[0].parentNode.removeChild(tooltip[0]);

Bootstrap 的工具提示在单击按钮和鼠标离开后不会消失

Bootstrap's tooltip doesn't disappear after button click & mouseleave

javascript

twitter-bootstrap

tooltip

和Bootstrap5