javascript - Bootstrap Tooltip 大尺寸时位置紊乱

标签 javascript css bootstrap-4 tooltip

我正在使用带有 fullcalendar.js 的 Bootstrap 工具提示(但问题不在 fullcalendar 库中,我只是将其包含在内。)

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

如果我删除 .container 中的 overflow-y:scroll 使其看起来像这样,这很容易修复

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

不幸的是,我需要那个overflow-y:scroll

有什么想法吗?谢谢。

最佳答案

你只需要添加:

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 .

关于javascript - Bootstrap Tooltip 大尺寸时位置紊乱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50599969/

相关文章:

html - 将背景颜色应用于具有背景图像的容器

javascript - Ajax 调用困惑

Javascript "this"问题

javascript - Js正则表达式到Python正则表达式

javascript - 道场 ListItem : display style changes on resize

css - 使用文本转换强制大写输入到 CSS 中的标题大小写

html - Div 不会在使用 CSS 查询的幻灯片中垂直调整大小

html - Bootstrap 图像缩略图大小不同

jquery - 如何使用 Bootstrap 构建三列 Accordion 和列表组

javascript - 更改即时创建的引导模式标题