将工具提示添加到带有溢出的 div答案

【问题标题】：Adding tooltip to div with an overflow将工具提示添加到带有溢出的 div
【发布时间】：2016-05-04 23:28:46
【问题描述】：

我正在开发一个包含多个列出项目的水平滚动部分。每个列出的项目都包含一个工具提示，应在悬停时显示在所述列出的项目上方。由于父 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/

【问题讨论】：

标签： html css tooltip overflow frontend

【解决方案1】：

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

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

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

【讨论】：