在overflow:hidden上显示工具提示

Question

在overflow:hidden上显示工具提示

7

我希望在一个相对复杂的编辑器中，在项目旁边显示工具提示，该编辑器具有自定义滚动功能。工具提示应“逃脱”具有设置overflow: hidden以限制视口的容器。

以下是显示问题的示例：

.container {
  border: 1px black solid;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.column {
  background-color: #99FF99;
  padding: 25px;
}

.tooltip-container {
  position: relative;
}

.content {
  background-color: #9999FF;
  width: 50px;
  height: 50px;
}

.tooltip {
  z-index: 1;
  background-color: #FF9999;
  display: none;
  position: absolute;
  left: 100%;
  top: 0%;
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: inline-block;
}

<div class="container">
  <div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            1
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 1
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            2
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 2
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            4
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 4
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            3
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 3
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            5
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 5
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            6
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 6
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            7
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 7
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            8
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 8
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            9
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 9
          </div>
        </div>    
      </div>
    </div>  
  </div>
</div>

JSFiddle

当然，我已经搜索了这个问题，并且已经有很多解决方案。但是我没有找到解决我的问题的方法。

最常见的解决方案是将工具提示的position属性设置为absolute，并在

外添加一个具有overflow:hidden的包装器，如此处所示。但是，这在我的情况下不起作用，因为工具提示应该位于描述它的项目右侧。因此，我需要在工具提示容器上使用相对位置。

我尝试使用position:relative和一些偏移量来包装工具提示，并在包装器中使用position:absolute。但是这没有起作用，因为包装器捕获了鼠标悬停在工具提示上的事件。而且这意味着我必须知道附加项目的大小。

我尝试将项目在tooltip-container中水平排列，然后使用标准的position:absolute技巧，但我也无法使其工作。

有人有想法吗？

约束条件：

工具提示出现在一个具有overflow:hidden的容器中，并且应该跳出它
容器中的内容可以移动
没有固定的大小
如果可能的话，它应该是一个仅使用CSS的解决方案（但绝对不包括jQuery）
工具提示应该出现在附加项的右侧（如果它可以出现在任何一侧，就可以获得奖励积分）
工具提示不仅可以包含文本，还可以包含其他控件和输入

- jsf

它无法逃脱具有overflow:hidden属性的容器 - 这就是隐藏溢出的目的。 - Pete

https://css-tricks.com/popping-hidden-overflow/ - VXp

@VXp 这是提到的解决方案，但它不起作用，在overflow:hidden的div周围有一个position:relative包装器。 - jsf

@Pete 我知道。但也许我可以指定一个例外规则。或者也许有一种不同的可能性可以剪辑某些子元素而不是其他的。 - jsf

不，你唯一能做的就是有一个外部容器，包含两个内部容器 - 一个带有溢出隐藏，另一个带有你的工具提示，然后使用一些js来定位和显示工具提示，具体取决于哪个元素被悬停。如果你想要一个纯CSS解决方案，那么你就没那么幸运了。 - Pete

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你可以使用唯一的CSS技巧position:fixed，并且用null变换来阻止它，这样你就可以满足大多数约束条件了。

body {
  min-height:200vh;
  transform:translate(0,0);
}

.container {
  border: 1px black solid;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.column {
  background-color: #99FF99;
  padding: 25px;
}

.tooltip-container {
  position: relative;
}

.content {
  background-color: #9999FF;
  width: 50px;
  height: 50px;
}

.tooltip {
  z-index: 1;
  background-color: #FF9999;
  display: none;
  position: fixed;
  transform:translate(50px,-50px);
  /*left: 100%;
  top: 0%;*/
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: inline-block;
}

<div class="container">
  <div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            1
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 1
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            2
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 2
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            4
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 4
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            3
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 3
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            5
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 5
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            6
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 6
          </div>
        </div>    
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            7
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 7
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            8
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 8
          </div>
        </div>    
      </div>
      <div class="column">
        <div class="tooltip-container">
          <div class="content">
            9
          </div>
          <div class="tooltip">
            Super nice and awesome and cool and hot 9
          </div>
        </div>    
      </div>
    </div>  
  </div>
</div>