html - 信息框内溢出 :hidden container should be visible outside

Question

我有一个 div 表格，里面有很多内容，因为我添加了 overflow:hidden 所以表格是可滚动的。

我在里面有一个信息链接，悬停时会显示一些额外的信息。

问题是，表格第一行的信息框很可能在表格之外，这部分被切断了。

如何在不删除 overflow:hidden 或使用 JS 的情况下使表格外的隐藏信息框可见？

.outertable{
    display:block;
    overflow-x:auto !important;
}

.info:hover:after{
    background: rgba(75,75,75, 0.85);
    bottom: 32px;
    color: #fff;
    content: attr(data-tooltip);
    left: -100px;
    position: absolute;
    z-index: 999;
    width: 200px;
}

这是 jsfiddle 上的一些小例子: https://jsfiddle.net/0tcbadk8/10/

.outertable {
  box-shadow: 3px 3px 7px -3px rgba(0, 0, 0, 0.30);
  display: block;
  overflow-x: auto !important;
}

div.table {
  display: table;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

div.tr {
  display: table-row;
}

div.maintr {
  display: table-row;
}

.maintr .td {
  padding: 15px 5px;
}

div.td {
  display: table-cell;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
}

.info {
  display: inline;
  position: relative;
}

.info:hover:after {
  background: #333;
  background: rgba(75, 75, 75, 0.85);
  border-radius: 5px;
  bottom: 32px;
  color: #fff;
  content: attr(data-tooltip);
  left: -100px;
  padding: 15px 25px;
  position: absolute;
  z-index: 999;
  width: 200px;
}

.info:hover:before {
  border: solid;
  border-color: #4b4b4b transparent;
  border-width: 12px 12px 0 12px;
  bottom: 20px;
  content: "";
  left: 0%;
  position: absolute;
  z-index: 99;
}

<br/><br/><br/><br/><br/><br/>

<div class="outertable">
  <div class="table offerstyle">
    <div class="tr">
      <div class="td fixinfonooverflow"></div>
      <div class="td"></div>
      <div class="td"></div>
      <div class="td"></div>
      <div class="td"></div>
    </div>
    <div class="tr">
      <div class="td"><img class="" data-original="images/logo/3.png" title="" alt="" src="images/logo/3.png" style=""></div>
      <div class="td"><a href="/landingpage.html" target="_blank">BLABLABLA</a></div>
      <div class="td">
        <div class="nonewline more_info" title="4.8 von 5 Sternen und 5 Bewertungen"><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star ratingtwo" aria-hidden="true"></i><i class="fa fa-star-half-o ratingtwo"
            aria-hidden="true"></i></div>
      </div>
      <div class="td">
        <a class="info" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a est ut justo interdum efficitur at id tortor. Cras lacinia, sapien sit amet suscipit sodales, mi velit bibendum risus, at dictum ligula mauris vel dui."><i class="fa fa-info-circle" aria-hidden="true"></i> info</a>
      </div>
      <div class="td">TEST<br>TEST2<br>TEST3<br></div>
    </div>
    <div class="tr">
      <div class="td fixinfonooverflow"></div>
      <div class="td"></div>
      <div class="td"></div>
      <div class="td"></div>
    </div>
  </div>
</div>

Answer 1

我看到 3 个选项:

1) 如果您知道信息框的内容并且内容是固定大小的，您可以增加表格的间距以适应信息框的大小以保持“内部”。

2) 快速解决方案:您可以在信息框上使用 position: fixed 而不是 position: absolute ，如果它符合您的需要(不会滚动)随着内容的变化，它将保持不变。

.info:hover:after{
    background: #333;
    background: rgba(75,75,75, 0.85);
    border-radius: 5px;
    color: #fff;
    content: attr(data-tooltip);
    left: 400px;
    top: 0;
    padding: 15px 25px;
    position: fixed;
    z-index: 999;
    width: 200px;
}
.info:hover:before{
    border: solid;
    border-color: #4b4b4b transparent;
    border-width: 12px 12px 0 12px;
    content: "";
    left: 420px;
    top: 173px;
    position: fixed;
    z-index: 99;
}

更新的 jsfiddle:https://jsfiddle.net/0tcbadk8/27/

3) 使用 jQuery/Javascript 动态创建信息框，并根据触发元素的位置定位它，检查它是否溢出表格边界并重新定位。同时它可以放在标记中的 overflow:hidden 容器之外。