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

Question

有没有办法,最好没有js,在容器必须有的overflow:hidden情况下,在容器上方放置和显示工具提示,而工具提示不受容器影响和夹住？

这是一个例子来说明这个问题:

.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>

Answer 1

有一种方法可以在这些条件下显示元素,方法是将其置于绝对位置(作为一个简单的包装器)并包含相对定位的工具提示.
所以你需要添加一个元素.
一个重要条件:父母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>