Bootstrap大尺寸时工具提示位置错乱

Question

我将 bootstrap 工具提示与 fullcalendar.js 一起使用（但问题不在 fullcalendar 库中，我只是将其包含在内。）

JSfiddle 上有问题。您将看到不断闪烁的工具提示。

如果我删除 .container 中的 overflow-y:scroll 使其看起来像这样

，这很容易修复

.container{
  height:300px;
  width:220px;
  display:block;
  margin:auto;
}

不幸的是，我需要 overflow-y:scroll。

有什么想法吗？谢谢。

Answer 1

您只需添加：

boundary: 'viewport'

在工具提示函数调用的选项中：

$( document ).ready($('.hastooltip').tooltip({
        container: 'body',
        boundary: 'viewport',
        trigger: 'hover',
        template: '<div class="tooltip ' + tooptipClass + '" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'}));

查看示例here。

Bootstrap大尺寸时工具提示位置错乱

Bootstrap Tooltip position disorder when in large size

javascript

css

tooltip

bootstrap-4