Bootstrap 4.x 工具提示在放置在可能溢出的容器中时未正确放置

Question

在 bootstap 4.x 中，如果其中一个父元素具有 overflow 属性集，则工具提示不会正确放置。在下面的代码示例中，我使用 overflow: auto;，但 overflow: scroll; 也不起作用。

尝试运行下面的代码片段，您会看到工具提示与按钮元素重叠。

如何防止工具提示与按钮元素重叠？我需要在可滚动的容器中使用它，而不是将放置留给内部逻辑。

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

#wrapper{
   margin-top: 100px;
   width: 100vw;
   overflow: hidden;
   border: 1px solid red;
   overflow: auto;
}
#scrollable{
  width: 2000px;
  background: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="wrapper">
  <div id="scrollable">
    &nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip with some text in it maybe a lot of text" data-container="body">
      Tooltip btn
    </button>
  </div>
</div>

Answer 1

解决方法是设置boundary attribute, whose default is 'scrollParent' to 'window' and everything works as expected. In the usage section, you will find another example.

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

#wrapper{
   margin-top: 100px;
   width: 100vw;
   overflow: hidden;
   border: 1px solid red;
   overflow: auto;
}
#scrollable{
  width: 2000px;
  background: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="wrapper">
  <div id="scrollable">
    &nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip with some text in it maybe a lot of text" data-container="body">
      Tooltip btn
    </button>
  </div>
</div>

祝你好运！

Bootstrap 4.x 工具提示在放置在可能溢出的容器中时未正确放置

Bootstrap 4.x tooltip not placed correctly when placed in a container that can overflow

javascript

css

tooltip

twitter-bootstrap

bootstrap-4