logo标签列表

当容器溢出隐藏时显示工具提示

htmlcss
32

有没有一种方法（最好不要使用JS），可以在容器的上方定位和显示工具提示，当容器必须设置overflow：hidden时，而且工具提示不会受到容器的影响和裁剪？

下面是一个例子来说明这个问题：

.container {
  overflow: hidden;
  position: relative;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  height: 96px;
  line-height: 96px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.7;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
<div class="container">
  
  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
    </div>
  <div>

为什么必须要有 overflow:hidden？ - dippas
2
根据你目前的设置，我认为这是不可能的。如果你的容器使用了overflow:hidden属性，那么你将无法在容器外显示tooltip子元素。无论你想通过overflow:hidden实现什么目的，都可能有其他方法来达到你想要的效果。 - Huangism
1
@dippas 因为容器里还有其他东西，不能溢出容器外。 - Amir Gonnen
1
@AmirGonnen 那请您展示真正的内容，以便我们提供更好的帮助。 - dippas
2
@AmirGonnen 把其他东西放在 .container 的另一个容器里，并将新容器设置为溢出隐藏。只要您的工具提示不在任何溢出隐藏的父元素中，就应该没问题了。 - Huangism
如果您真的需要在不更改任何结构的情况下使其工作，并且您知道工具提示的高度，则可以给溢出隐藏容器添加底部填充，直到工具提示可见。这不是一个好的解决方案，因为页面下方会有空白空间和额外的滚动条。 - San
4个回答
51
在这种情况下显示元素有一种方法，即将其绝对定位（作为简单的包装器），并包含相对定位的工具提示。
因此，您需要添加一个元素。
一个重要条件：带有overflow: hidden的父元素不能自身定位，否则工具提示将无法弹出/显示在该父元素上方。 

 .container {
  overflow: hidden;
  /*position: relative;*/
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
}
.has-tooltip {
  /*position: relative;*/
  display: inline;
}
.tooltip-wrapper {
  position: absolute;
  visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
  visibility: visible;
  opacity: 0.7;
  /*top: 30px;*/
  /*left: 50%;*/
  /*margin-left: -76px;*/
  /* z-index: 999; defined above with value of 5 */
}

.tooltip {
  display: block;
  position: relative;
    top: 2em;
    right: 100%;
  width: 140px;
  height: 96px;
  /*margin-left: -76px;*/
  color: #FFFFFF;
  background: #000000;
  line-height: 96px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
  content: '';
  position: absolute;
    bottom: 100%;
    left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
<div class="container">
  
  <a class="has-tooltip" href="#">Hover me for Tooltip
      <span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
    </div>
  <div>

1
有意思。我要试试。你知道这种行为背后的原因是什么吗？只有在父级未定位时，它才起作用？ - Amir Gonnen
1
当然不会 ^_^ 即使询问了一些很资深的 CSS 人员（编辑：这不仅仅是堆叠上下文或块级格式化上下文 - BFC，可能是两者的混合）。 - FelipeAls
1
一个非常酷的实现，但是如果工具提示容器在可以滚动的容器内部，那么工具提示位置将不会相应地移动。 - Hadar Romashkano
2
现在我已经使用了绝对定位来固定工具提示，现在检查一下。 

.container {  
  position: relative;
  overflow:hidden;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  height: 70px;
  background: lightblue;
  text-align: center;
  z-index:9;
}
a.tooltips {
  position: relative;
  display: block;
}
a.tooltips span {
  position: fixed;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  height: 96px;
  line-height: 96px;
  text-align: center;
  visibility: hidden;
  border-radius: 8px;
  z-index:9999;
  top:15px;
  box-shadow: 4px 3px 10px #800000;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.7;
  top: 40px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
<div  style="height:500px;">
<div class="container">
  <a class="tooltips" href="#">Hover me for Tooltip
      <span>Tooltip</span></a>
  <div>
    </div>

它随着滚动移动，不建议使用固定位置！ - Yasin Farmani
1

如果只更改(div)父元素的CSS位置（通过jQuery），使其在鼠标悬停时变为“静态”，然后再恢复为“相对”呢？

在我的配置中（由于多种原因），父元素必须保持“相对”和“隐藏”。这样可以避免在CSS中添加/更改任何内容。

$('.trigger').hover(function () {  
    $(this).closest('.parent').css({position:"static"})
    },
    function(){$(this).closest('.parent').css({position:""})
});
.trigger {
  position: absolute;
  padding:0 15px;
  border:3px solid; 
  color:white;
  background:#838678
}

.tooltip { 
  position: absolute;
  top:90px;
  width:200px;
  padding: 30px 20px;
  background: #333;
  color: white;   
  border-radius: 9px;    
  opacity:0;
}

.trigger:hover .tooltip {  
opacity: 1;  
}

.parent { 
position:relative;
overflow:hidden;
width:200px;
height:150px; 
border:4px solid green;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<div class="parent">
    
  <div class="trigger">
    <p> hover me </p>
      
    <div class="tooltip"> 
    voilà :)
    </div>

  </div> 

</div>

-1

I have used content-type="template" with [tooltip] and used

and
tag to give some space in ng-template. it will move tooltip content down (can be molded accordingly) and make it visible.

<a class="fas fa-question-circle" 
    [tooltip]="identifier"  content-type="template" [show-delay]="300">
 </a>
 
   <!--tool tip content wiht #identifier -->
  <ng-template #identifier>
    <p style="color: white;">
      <br>
      Quesion? Email Us!
       </p>
  </ng-template>


  [1]: https://istack.dev59.com/69w6h.webp

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接