javascript - Tooltip element with absolute positioning being clipped by container with overflow: auto

Question

I have a tooltip in a modal.

Is there a way that I can avoid the tooltip from being clipped by a container with overflow on it?

I need the modal-dialog to handle content overflow so I cannot remove the overflow: auto from it.

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  display: block;
  height: 50%;
  width: 50%;
  background: cyan;
  border: 1px solid;
  overflow: auto;
}

.tooltip {
  position: relative;
  color: red;
  text-decoration: underline;
}

.tooltip::after {
  display: none;
  content: 'Hello';
  position: absolute;
  left: -100%;
  top: -100%;
  height: 20px;
  width: 60px;
}

.tooltip:hover::after {
  display: inline-block;
  background: black;
  color: white;
}

<div class="container">
  <div class="modal-dialog">
    <span class="tooltip">Tooltip</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
  </div>
</div>

Answer 1

The overflow: auto rule will clip any content that overflows the container, as you have indicated. You would get a similar result with overflow: hidden.

Because your tooltip pop-up (hover state) is absolutely positioned, and the nearest positioned ancestor is the tooltip trigger itself (position: relative), and this trigger is within the container with overflow: auto, there's no way to show the pop-up outside the container.

What you can do is make the nearest positioned ancestor an element higher up in the DOM structure. Then the abspos pop-up will reference that element, as opposed to the element with the overflow.

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;    /* moved here from .tooltip  */
}

.modal-dialog {
  display: block;
  height: 50%;
  width: 50%;
  background: cyan;
  border: 1px solid;
  overflow: auto;
}

.tooltip {
  color: red;
  text-decoration: underline;
}

.tooltip::after {
  display: none;
  content: 'Hello';
  position: absolute;
  left: 15%;            /* adjust as necessary */
  top: 15%;             /* adjust as necessary */
  height: 20px;
  width: 60px;
}

.tooltip:hover::after {
  display: inline-block;
  background: black;
  color: white;
}

<div class="container">
  <div class="modal-dialog">
    <span class="tooltip">Tooltip</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cupiditate ducimus, ea numquam est magnam quia ex consequuntur! Ratione modi dicta totam vel dolore, consequuntur nulla, amet labore odio voluptate!
  </div>
</div>