CODEWITHSUNDEEP
htmlcss
ALec
ALec

Reputation: 161

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

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:

enter image description here

Upvotes: 6

Views: 8269

Answers (1)

Temani Afif
Temani Afif

Reputation: 273022

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

Upvotes: 4

Related Questions