Question

我正在开发一个包含多个列出项目的水平可滚动部分。每个列出的项目都包含一个工具提示，该工具提示应在悬停时显示在所列项目上方。由于父div是一个可滚动的部分，我需要相对于列出的项目定位工具提示，但这会导致工具提示由于父项上设置的“overflow-x：scroll”而消失。我现在真的很难过。任何建议将不胜感激。

HTML

<div class="scroller">
   <div class="scrollable-item">
      <span> Static Text</span>
      <span> Static Text</span>
      <div class="scrollable-item-tooltip">
      </div>
   </div>
   <div class="scrollable-item">
      <span> Static Text</span>
      <span> Static Text</span>
      <div class="scrollable-item-tooltip">
      </div>
   </div>
   <div class="scrollable-item">
      <span> Static Text</span>
      <span> Static Text</span>
      <div class="scrollable-item-tooltip">
      </div>
   </div>
</div>

CSS

.scroller {
  overflow-x:scroll;
  white-space:nowrap;
}

.scrollable-item {
  position:relative;
  width:160px;
  display:inline-block;
}

.scrollable-item-tooltip {
  position:absolute;
  bottom:100%;
}

我尝试创建一个小提琴，但看起来有些东西阻止我打破布局，所以代码实际上在下面的链接上正常工作而没有溢出。无论如何，我会留下链接。 https://jsfiddle.net/xjrkt2fe/3/

Answer 1

是的，滚动div之外的内容将被div的边界隐藏/剪切。

您的选择是：1）增加div的大小以容纳工具提示（很可能不是一个选项）。或者2）在div之外的某处添加工具提示，并在悬停时手动将它们放置在div中的项目旁边。这可能还包括处理与屏幕边缘的碰撞，处理在div滚动时更新位置等等。如果工具提示只能隐藏在滚动上，您可以躲避最后一个问题。

取决于框架/库/等。你正在使用，你可能有一些东西可以为你做一些。如果没有，像jQuery UI的.position（）方法或Tether http://github.hubspot.com/tether/这样的东西会非常方便。

通过溢出向div添加工具提示

1 个答案: