css - 在溢出时显示工具提示 :hidden

标签 css tooltip overflow

我想在具有自定义滚动功能的相当复杂的编辑器中的元素旁边显示工具提示。工具提示应该“转义”具有 overflow: hidden 设置以限制视口(viewport)的容器。

这是一个显示问题的示例:

.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 并在div 外部添加一个带有overflow:hidden 的包装器，如图所示here .这在我的情况下不起作用，因为工具提示应该位于它描述的元素的右侧。所以我需要工具提示容器上的相对位置。

我尝试使用 position:relative 包装工具提示，并使用 position:absolute 在包装器中进行一些偏移。这没有用，因为包装器捕获了工具提示的鼠标悬停。这也意味着我必须知道附加元素的大小。

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

有人有想法吗？

约束:

  • 工具提示出现在一个容器中，该容器具有overflow:hidden 并且应该将其转义
  • 容器中的内容可以移动
  • 没有固定尺寸
  • 如果可能，它应该是一个纯 CSS 解决方案(但绝对不是 jQuery)
  • 工具提示应出现在附加元素的右侧(如果它可以出现在元素的任何一侧，则加分)
  • 工具提示不仅可以包含文本，还可以包含其他控件和输入

最佳答案

您唯一可以使用的 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>

关于css - 在溢出时显示工具提示 :hidden，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50983381/

上一篇：css - Bootstrap 3.3.7 与 Bootstrap 4

下一篇：css - 我可以让动画计时功能影响整个动画而不是动画的每个步骤吗？

相关文章：

html - 包含 HTML 的交互式 CSS 工具提示框

html - 如何使容器内的元素响应？

overflow - 不必要的限制 - 温 bool 登网球记分牌

html - 使用 bootstrap 3.3 对齐移动设备和桌面的搜索栏

javascript - 以下 AngularJS 代码更改底部边框颜色的正确语法是什么？

css - 创建类似于 Masonry 的水平滚动布局

html - Unicode 向下三 Angular 形在 IE9 中不显示

javascript - 用于弹出窗口/工具提示的 jQuery 插件？

javascript - div 不会在图像悬停时显示

CSS水平滚动条不显示，或者右侧有空白

©2024 IT工具网  联系我们