溢出中的工具提示：滚动；元素答案

【问题标题】：Tooltip in a overflow: scroll; element溢出中的工具提示：滚动；元素
【发布时间】：2017-04-06 15:09:26
【问题描述】：

我有一个设置为溢出滚动的 div，我想在其中显示工具提示，工具提示从容器中“泄漏”出来，因此它被隐藏了。我在 StackOverflow 上看到了有关此问题的其他问题，基本上它们都删除了包含元素的 position: relative;，但我需要 position: relative; 以便工具提示应呈现在正确的位置。
有一阵子，非常感谢帮助！
JSFiddle这里

【问题讨论】：

请添加您的代码。
请提供任何链接或代码，
这是一个 JS 小提琴jsfiddle.net/eyfoa90L

标签： html css sass

【解决方案1】：

您是否真的需要overflow:scroll 标签才能没有滚动条？

如果是这样，我通过完全删除 overflow 来解决这个问题 - 但不确定这是否是您需要的。这是我保持position:relative

的唯一方法

查看修改后的小提琴 - https://jsfiddle.net/eyfoa90L/3/

【讨论】：

我确实需要溢出属性我需要一个解决方案，父级有溢出滚动并且工具提示有一个绝对位置jsfiddle.net/0qfzxbvk

【解决方案2】：

好的，感谢您更新您的问题，请查看下面的截图，

.container {
  background: #ddd;
  margin: 20px;
  width: 150px;
  height: 100px;
  overflow: auto;
  position: relative;
}

span.tip {
  display: none;
}

.child:hover > span.tip {
  display: block;
}

.tip {
 position: absolute;
 left: 10px;
  content: attr(data-tipsy);
  background-color: #34495e;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  white-space: nowrap;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

<div class="container">
  <div class="child">
  test tooltip
    <span class="tip" data-tipsy="Simple Tipsy">Test Tipsy</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, maecenas.
  </div>
  <div class="child">
  test tooltip
    <span class="tip" data-tipsy="Simple Tipsy">Test Tipsy</span>
  </div>
</div>

当然，您必须按照自己的意愿设置样式。

【讨论】：

这个问题是这个工具提示是相对定位的，因此会在页面流中占据一席之地，我需要一个绝对位置解决方案
再次检查sn-p，这是你需要的吗？
OP 有一个overflow: scroll
现在你删除了 overflow: scroll 属性，这对我的代码来说是必需的，这是一个更新的 JSFiddle，这是我需要的 jsfiddle.net/0qfzxbvk 谢谢你的工作！
我再次添加了它，希望我能帮助你;-)，如果是这样，请投票给我:)。问候！

【解决方案3】：

我认为你无法在 CSS 中解决这个问题，因为 CSS 的 :hover 属性总是需要“hover”元素的子元素才能在其上使用其属性。如果您想解决这个问题，您需要将工具提示放在任何悬停的父元素之外。

我认为 Javascript 和 addEventListener('onmouseover',function) 是你最好的选择。

【讨论】：