如何使我的 CSS 工具提示可滚动？

Question

我正在尝试在可滚动的 div 元素中创建工具提示：

.tooltip {
  display: none;
  position: absolute;
  background-color: #000;
  color: #fff;
}

.parent:hover .tooltip {
  display: block
}

#list {
  height: 40px;
  overflow: auto;
  width: 80px
}

<div id="list">
  <div class="parent">
    Element1<span class="tooltip">Tip1</span>
  </div>
  <div class="parent">
    Element2<span class="tooltip">Tip2</span>
  </div>
  <div class="parent">
    Element3<span class="tooltip">Tip3</span>
  </div>
  <div class="parent">
    Element4<span class="tooltip">Tip4</span>
  </div>
</div>

将鼠标悬停在 parent 上时，tooltip 变得可见，但如果我向下滚动列表，tooltip 不会随着关联的 parent 向上滚动。

如果我将 tooltip 的样式更改为 position: relative，它们会沿用它们的 parent，但会取代其他 parent。

如何使我的工具提示可滚动，同时仍使其显示在周围环境之上？

Answer 1

您可能需要明确地给每个 parent 一个 position: relative; 的属性。 position: absolute; 的元素附加到最近的 parent 并设置了 position: relative;。

.parent {
  position: relative;
}

Answer 2

$(document).ready(function(){
$('.example').tooltip({ boundary: 'window' });
});

#list {
  height: 40px;
  overflow: auto;
  width: 100px
}
#list span {
display: block;
clear: both;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div id="list">
<span class="example" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</span>
<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</span>
<span class="example" class="example" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</span>
<span class="example" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</span>
<span class="example" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</span>
</div>






<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

您可以使用 Bootstrap 工具提示。你的滚动条有 overflow:hidden css 这就是它坏掉的原因，如果你只使用 css 我认为它不会变得好看。

如何使我的 CSS 工具提示可滚动？

How can I make a my CSS tooltip scrollable?

css

tooltip