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

发布时间：2020-12-14 19:43:26 所属栏目：资源来源：网络整理

导读：当容器必须有溢出：隐藏时,是否有一种方法,最好没有js,在容器上方定位和显示工具提示,而不会影响工具提示并被容器夹住？这是一个例子来说明这个问题： .container { overflow: hidden; position: relative; margin: auto; width: 50%; border: 3px solid gr

当容器必须有溢出：隐藏时,是否有一种方法,最好没有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>

解决方法

有一种方法可以在这些条件下显示元素,方法是将其置于绝对位置(作为一个简单的包装器)并包含相对定位的工具提示.
所以你需要添加一个元素.
一个重要条件：具有溢出的父级：隐藏不得自行定位,否则工具提示不会在此父级上方弹出/显示.

> Codepen(我将你的.tooltips类重命名为.has-tooltip并添加了2个anothers)
> My previous answer with a similar trick

.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,eget aliquet nibh augue.
    </div>
  <div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!