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: absolute来代替position: fixed，如果它满足您的需要，它将起作用（不会滚动内容，它将保持不变）。

.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容器之外。

Answer 2

演示：

https://jsfiddle.net/0tcbadk8/56/

说明：

您需要从父级中删除position: relative才能使其从overflow: hidden中弹出
但是现在我们不能使用top，right，bottom或left，因为那将不是相对于父对象，而是相对于body
因此，仅使用translate和margin定位它们
我还将要求伪元素所有者的宽度
因此添加了JS，它添加了一个--width css变量
使用一些基本逻辑和数学，将translateX和translateY添加到伪元素

PS：这是仅css的解决方案http://jsfiddle.net/keygcptw/1/，但唯一的问题是工具提示位于最右端而不是居中

溢出内的信息框：隐藏的容器应该在外部可见

2 个答案:

演示：

说明：