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

问题描述

在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>

解决方法

解决方案是将boundary attribute设置为默认值'scrollParent'为'window'，一切正常。在用法部分，您将找到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>

祝你好运！