小容器定位问题

Question

我遇到Bootstrap 4工具提示定位问题。我有一个可滚动的容器，这个容器足够窄，只能用于物品。对于项目，我想在右侧显示工具提示。项目的工具提示不适合容器，Bootstrap位置不正确，如下图所示Fiddle。

如果我为容器提供足够宽的工具提示，则没有问题。

即使不适合容器，如何解决问题并将工具提示放在右侧？

这是HTML：

<div id="container">
  <div id="content">
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
  </div>    
</div>

和CSS：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

#container {
    width: 120px;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
}

#content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #f0f0f0;
}

.block {
  background-color: #f1f1f1;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  margin: 10px;
  background-color: #00ff00;
}

Answer 1

因为popper.js用于绝对定位tooltip。您可以使用工具提示中的 data-boundary 选项覆盖此行为...

https://www.codeply.com/go/Ueu4813mhH

<div id="container">
  <div id="content">
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
  </div>    
</div>