Display tooltip when container overflow is hidden

Question

Is there a way, preferably without js, to position and display a tooltip above a container, when the container must have overflow:hidden, without the tooltip be affected and clipped by the container?

Here is an example to illustrate this problem:

.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>

With your current setup, I don't think that's possible. If your container is overflow hidden then you won't be able to show the tooltip child outside of the container. Whatever it is you are trying to achieve with overflow hidden, there is probably another approach to achieve what you want — Huangism
– Huangism, Commented Aug 25, 2016 at 13:03
@dippas because there are other stuff on the container, which must not overflow outside of it. — Amir Gonnen
– Amir Gonnen, Commented Aug 25, 2016 at 13:03
@AmirGonnen then show us the real content for a better assistance — dippas
– dippas, Commented Aug 25, 2016 at 13:04
@AmirGonnen put the other stuff inside of a different container inside of .container and make the new container overflow hidden instead. As long as your tooltip is not inside of any overflow hidden parent, you should be good — Huangism
– Huangism, Commented Aug 25, 2016 at 13:05

Community · Accepted Answer · 2017-05-23 12:34:39Z

57

There's a way to display an element in these conditions, by having it absolutely positioned (as a simple wrapper) and containing a relatively positioned tooltip.
So you need to add an element.
One important condition: the parent with overflow: hidden must not be positioned itself or the tooltip won't pop out/displayed above this parent.

Codepen (I renamed your .tooltips class as .has-tooltip and added 2 anothers)
My previous answer with a similar trick

 .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>

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Aug 25, 2016 at 15:21

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amir Gonnen Over a year ago

That is interesting. I'm going to try it. Any idea what's the reason behind this behavior, that it works only when the parent is not positioned?

FelipeAls Over a year ago

Of course not ^_^ even after asking a few very senior CSS people (edit: it isn't just stacking context or Block Formatting Context - BFC, it may be a mix of both)

Hadar Romashkano Over a year ago

A really cool implementation, however, if the tooltip container is inside a container that can be scrolled, the tooltip position will not move accordingly.

Ganesh Putta · Accepted Answer · 2016-08-25 13:31:28Z

3

now i used position absolute to fixed for the tooltip, check it now

.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>

answered Aug 25, 2016 at 13:31

Ganesh Putta

2,6872 gold badges22 silver badges27 bronze badges

1 Comment

Yasin Farmani Over a year ago

it moves with scroll , position fixed is not recommended!

ene · Accepted Answer · 2022-08-24 19:09:39Z

What about only changing the (div) parent's css position (via jQuery), thus making it 'static' on mouseover ? And then back to 'relative' afterwards..

In my configuration (for multiple reason), the parent HAD TO stay both 'relative' and 'hidden'. Nothing added/changed in the css this way.

$('.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>

Shirish Chaudhari · Accepted Answer · 2024-01-12 10:20:29Z

I see the easiest way to fix this adding position:fixed to tooltip. However, applying fixed position will take it out of Div/container which means if you are using this in scroll scenario it wont work.

if you scroll and hover for tooltip. tooltip will appear at the same position & not sticky to the main element anymore.

.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: fixed;
  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: 50px;
  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>

Sanjeev kumar Singh · Accepted Answer · 2021-05-31 13:16:24Z

-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://i.sstatic.net/69w6h.png

answered May 31, 2021 at 13:16

Sanjeev kumar Singh

92 bronze badges

Collectives™ on Stack Overflow

Display tooltip when container overflow is hidden

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related