Show element inside a DIV with overflow-y on top of all others

Question

I have the following tooltip:

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
  <tr>
    <td width="50%">
      <div id="left_div">
        </br>
        </br>
        </br>
        </br>
        <a class="tditems_tooltip">
          <font color="red">TRIGGER</font>
          <span>
            <table border="0" cellspacing="0" cellpadding="1" width="300">
              <tr bgcolor="green">
                  <td>CONTENT OF TOOLTIP</td>
              </tr>
            </table>
          </span>
        </a>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
      </div>
    </td>
    <td width="50%">INSIGNIFICANT CONTENT</td>
  </tr>
</table>

And so far It is working almost perfectly to what I intend to... Except for one thing: The tooltip (span) doesn't show on the top of all other elements of the page, instead shows behind it. Checkout the snippet above.

NOTE: When I remove from the CSS the overflow-x and overflow-y from the td it shows the way intended, but I still need to specify a max-height to that td...

Any ideas?

Answer 1

Adding position: fixed; to a child element will remove it from the flow of that element's parents in the DOM, so the child element will ignore any overflow properties of parent elements.

Assigning fixed positioning to the table that contains the tooltip seems to force that element outside of the overflow properties of it's parents, but then positioned itself differently within the absolutely positioned span element, so I applied transform: translateY(-100%); to make it work with your example. You may need to re-work the layout of those elements to get it to work as you'd it to. (btw, the styles I added are under a.tditems_tooltip span > table)

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}
a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
  <tr>
    <td width="50%">
      <div id="left_div">
        </br>
        </br>
        </br>
        </br>
        <a class="tditems_tooltip">
          <font color="red">TRIGGER</font>
          <span>
            <table border="0" cellspacing="0" cellpadding="1" width="300">
              <tr bgcolor="green">
                  <td>CONTENT OF TOOLTIP</td>
              </tr>
            </table>
          </span>
        </a>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
      </div>
    </td>
    <td width="50%">INSIGNIFICANT CONTENT</td>
  </tr>
</table>