隐藏容器溢出时显示工具提示

Question

当容器必须有 overflow:hidden 时，有没有办法（最好不用 js）在容器上方定位和显示工具提示，而工具提示不会受到容器的影响和剪裁？

下面是一个例子来说明这个问题：

 .container {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  height: 96px;
  line-height: 96px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.7;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

 <div class="container">

  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
    </div>
  <div>

原文由 Amir Gonnen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一种方法可以在这些条件下显示元素，方法 是使其绝对定位（作为简单的包装器）并 包含相对定位的 tooltip 。

所以你需要添加一个元素。

一个重要条件：带有 overflow: hidden 的父级不得自行定位，否则工具提示不会弹出/显示在该父级上方。

• Codepen （我将你的 .tooltips 类重命名为 .has-tooltip 并添加了2个）
• 我以前用类似的技巧回答

  .container {
  overflow: hidden;
  /*position: relative;*/
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
.has-tooltip {
  /*position: relative;*/
  display: inline;
}
.tooltip-wrapper {
  position: absolute;
  visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
  visibility: visible;
  opacity: 0.7;
  /*top: 30px;*/
  /*left: 50%;*/
  /*margin-left: -76px;*/
  /* z-index: 999; defined above with value of 5 */
}

.tooltip {
  display: block;
  position: relative;
    top: 2em;
    right: 100%;
  width: 140px;
  height: 96px;
  /*margin-left: -76px;*/
  color: #FFFFFF;
  background: #000000;
  line-height: 96px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
  content: '';
  position: absolute;
    bottom: 100%;
    left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

 <div class="container">

  <a class="has-tooltip" href="#">Hover me for Tooltip
      <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
    </div>
  <div>

原文由 FelipeAls 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现在我使用绝对位置来固定工具提示，现在检查一下

 .container {
  position: relative;
  overflow:hidden;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
  z-index:9;
}
a.tooltips {
  position: relative;
  display: block;
}
a.tooltips span {
  position: fixed;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  height: 96px;
  line-height: 96px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
  z-index:9999;
  top:15px;
  box-shadow: 4px 3px 10px #800000;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.7;
  top: 40px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

 <div  style="height:500px;">
<div class="container">
  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    </div>

原文由 Ganesh Putta 发布，翻译遵循 CC BY-SA 3.0 许可协议