How do you make an HTML tooltip fully visible in an overflow:hidden parent?

Question

I am trying to make a tooltip for my application so that when i hover over some writing, a popup appears. The writing that is to be hovered over is not fully visible (ie it is in a table cell with overflow:hidden so the words cut off). I want to display the full writing in a tooltip when hovering over it. I want the tooltip to be fully visible, unaffected by the overflow:hidden of the table cell. Here is what I have so far:

CSS:

.tooltip {
    position: relative;
}

.tooltip:hover:after {
    background: rgba(0,0,0,.8);
    color: #fff;
    top: -30px;
    left: 10px;
    border-radius: 15px;
    content: attr(alt);
    padding: 5px 15px;
    position: absolute;
}

HTML:

<table>
    <tr>
        <td style="overflow:hidden">
            <span alt="reallyLongFullWriting" class="tooltip">partiallyHiddenWriting</span>
        </td>
        <td></td>
    </tr>
</table>

It works like this but the tooltip gets hidden when it overflows as well. Please help me figure out how to make the tooltip fully visible and not partially hidden. Thanks.

Edit: Here is a photo of what seems to be happening:

Does changing the z-index css property not help? – Iskandar Reza Dec 22 '17 at 18:38 — Iskandar Reza, Dec 22 '17 at 18:38
unfortunately it does not seem to help – ALec Dec 22 '17 at 18:47 — ALec, Dec 22 '17 at 18:47

Temani Afif · Accepted Answer · 2017-12-22T19:21:32.833

If you will keep the same structure you cannot make the element visible with overflow:hidden.

A solution is to specify a height/width on the td element to create the necessary space for the :after element.

table {
  margin: 50px;
}

.tooltip {
  position: relative;
}

td {
  height: 80px;
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  top: -30px;
  left: 10px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: absolute;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

Another alternative is to use fixed position BUT without changing top/left/right/bottom property to keep the tooltip relative to its initial position. Instead adjust the position with some negative margin.

This solution will not work if you have scrolling in your page so it's not a generic solution. because an element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

table {
  margin: 50px;
}

.tooltip {
  position: relative;
}

td {
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  margin-top:-30px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: fixed;
  z-index:999;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

A workaround to still be able to use fixed position on scrollable page is to apply a transform with no effect on a parent element:

body {
 min-height:120vh;
}

table {
  margin: 50px;
  transform:translate(0,0);
}

.tooltip {
  position: relative;
}

td {
  overflow: hidden;
  border:1px solid;
}

.tooltip:hover:after {
  background: rgba(0, 0, 0, .8);
  color: #fff;
  margin-top:-30px;
  border-radius: 15px;
  content: attr(alt);
  padding: 5px 15px;
  position: fixed;
  z-index:999;
}

<table>
  <tr>
    <td>
      <span alt="fullWriting" class="tooltip">partiallyHiddenWriting</span>
    </td>
  </tr>
</table>

Some usefull links to understand the effect of transform on fixed position :

Why does `transform` break `position: fixed`?

https://stackoverflow.com/a/37953806/8620333

Unfortunately it is not the height that is giving me issues. It is the width that is giving more trouble. I cant make the width of the cell any larger because of the other data going into the table — ALec, Dec 22 '17 at 18:47
@ALec but the tooltip is place on the top, so the width should not provide you any issue .. or maybe you can share with us a more compete code to see :) — Temani Afif, Dec 22 '17 at 18:48
I have added a photo of what happens. As you can see, even though the tooltip is above the writing, it is still limited by the width of the cell and therefore gets cut off. The width seems to be my issue. — ALec, Dec 22 '17 at 18:57
@ALec ah ok! it's the width of the tooltip then, not the cell — Temani Afif, Dec 22 '17 at 18:59
Well if I set width:1000px; it still cuts it off at the same place (right at the edge of the cell). This leads me to believe that the tooltip is inside of the cell and the cell's width is cutting off the tooltip. — ALec, Dec 22 '17 at 19:06

How do you make an HTML tooltip fully visible in an overflow:hidden parent?

1 Answers1