显示工具提示是否溢出：隐藏

时间：2018-06-22 08:02:08

标签： css tooltip overflow

我想在一个具有自定义滚动功能的相当复杂的编辑器中，在项目旁边显示工具提示。工具提示应“转义”设置了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在div外部添加包装器，如here所示。在我的情况下，这不起作用，因为工具提示应位于其描述的项目的右侧。所以我需要在工具提示容器上的相对位置。

我尝试使用position:relative包装工具提示，并使用position:absolute将一些偏移量包装在包装器中。这不起作用，因为包装程序将鼠标悬停在工具提示上。同样，这意味着我必须知道附件的大小。

我尝试水平放置tooltip-container中的项目，然后使用标准的position:absolute技巧，但我也无法做到这一点。

有人有主意吗？

约束：

  • 工具提示出现在具有overflow:hidden且应转义的容器中
  • 容器中的内容可以四处移动
  • 没有固定大小
  • 如果可能的话，这应该是仅CSS的解决方案（但绝对不能使用jQuery）
  • 工具提示应显示在附加项目的右侧（如果可以出现在项目的任何一侧，则为加分点）
  • 工具提示不仅可以包含文本，还可以包含其他控件和输入

1 个答案:

答案 0 :(得分：1)

您可以使用的唯一CSS技巧是通过 null 转换阻止的position:fixed，并且可以使用大多数约束条件：

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>

相关问题
最新问题