向工具提示中添加pointer-events: none; css规则，如

.tooltip {
  pointer-events: none;
}

这将防止工具提示成为鼠标事件的目标，并将解决此问题。

阅读文档

Bootstrap 4上的文档明确解决了此问题，并提供了解决方案：
溢出自动和滚动
当父容器溢出时，工具提示位置尝试自动更改：自动或溢出：像我们的. table一样滚动，但仍保持原始位置的定位。要解决此问题，请将boundary选项设置为默认值'scrollParent'以外的任何值，例如'window'：
$('#example').tooltip({ boundary: 'window' })
因此，我们必须将boundary选项设置为'window'。
从docs上的boundary选项：
工具提示的溢出约束边界。接受“viewport”、“window”、“scrollParent”或HTMLElement引用（仅限JavaScript）的值。有关详细信息，请参阅Popper.js的preventOverflow文档。

最佳实践

也就是说，初始化所有工具提示的首选方法是使用'[data-toggle="tooltip"]'作为选择器：

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

一劳永逸#

现在，如果您要动态地向DOM添加或删除元素（带有工具提示），或者甚至要在不重新加载的情况下替换整个页面（例如，通过使用pushState库，如PJAX），或者如果您只是使用模态（带有工具提示），则必须（再次）初始化这些工具提示。

修复图元上的工具提示

这就是下面这个函数的用武之地，它可以销毁并重新创建所有的工具提示。

function recreateTooltips() {
    $('[data-toggle="tooltip"]').tooltip('dispose').tooltip({boundary: 'window'});
}

这可能看起来很昂贵（当然也很昂贵），但我从来没有注意到任何性能影响，即使在同一个页面上有几十个工具提示。

修复模态中的工具提示

要修复模态中的工具提示，只需将上面的函数绑定到'shown.bs.modal'事件，该事件在模态完全显示给用户后触发。

/** Recreate tooltips upon showing modal */
$(document).on('shown.bs.modal', '*', function () {
    recreateTooltips();
});

I found a quick solution for my problem. Although relatively short, my initial tooltip description was getting split on two lines. By chance, I tried shortening the tooltip text to fit on a single line. Once this was done, the tooltip was properly displayed. Therefore, I am assuming there must be a problem with the length of the tooltip text and the fact that the button is displayed all the way to the right of the page (and at the top of the page). I will not investigate this further for the time being.

我也遇到了同样的问题。我发现Bootstrap的工具提示在“floating”或“inline/inline-block”元素位于具有相对或绝对位置的容器中时，不能正确地将它们自己定位在这些元素上。我有一个右浮动的按钮，位于绝对定位的父容器中。如果我删除父容器的绝对位置，工具提示会显示得很好。Bootstrap需要解决这个问题。

这种情况会发生在内嵌项目上，例如a标记。将display属性设定为block可解决此问题。

延迟响应，但我有这个相同的问题，并能够解决它使用'容器'选项的工具提示jquery参考的html元素。
请参见此page和其中的jsfiddle链接。
您可以在此处查看工具提示容器选项的详细信息。

根据Steve的回答，我发现问题在于我的css对字体awesome css的引用是在引导css之后，引导css将字体awesome图标的显示属性设置为“inline-block”。
因此，为了解决这个问题，我只是把引导程序的css引用移到了字体很棒的css之后，这就解决了 Flink 的问题。

我不确定你对引导程序位有多少控制权，但听起来hover事件一直在触发。停止这种情况的方法是在调用前使用.stop（），但我不确定这在这里是否可行，例如：

$('#myelement').stop().fadeOut(200);

我不知道你是否能用Bootstrap调用做这样的事情，但它可能值得一试！

我有这个 Flink 的问题，因为我的按钮是隐藏在第一。触发工具提示隐藏元素将不起作用。我做了我自己的工具提示，看起来就像引导工具提示。
第一个