CODEWITHSUNDEEP
htmlcss
TheSilverHammer
TheSilverHammer

Reputation: 69

How do I get a tooltip to overflow a container?

I have a basic tooltip css class I am using, The problem is, that the tooltip gets clipped by the container it is. Specifically I am using an angularJs UI Grid and the tool-tip item is in a cell. The tool-tip does not draw outside of the cell. I have no idea what I need to change so this tool-tip will draw over everything and not be clipped.

I do have a sample that you can go to see this, if you go to: W3schools sample page

and put in the code:

<!DOCTYPE html>
<html>

<head>
  <style>
    .con-tooltip {
      position: relative;
    }
    .con-tooltip:hover:before {
      border: 1px solid #fc0;
      padding: 3px 6px;
      background: #fffea1;
      content: attr(data-title);
      font-size: 1.7em;
      position: absolute;
      left: 0px;
      top: -26px;
      z-index: 999999;
      overflow: visible;
    }
  </style>
</head>

<body>
  <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
  <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>

</body>

</html>

If you mouseover the top line of text you will see the tool-tip being clipped by the box, while the bottom line shows the full tool-tip. What CSS do I need to make the top tooltip show without clipping?

Upvotes: 1

Views: 724

Answers (1)

Alex Char
Alex Char

Reputation: 33218

The problem is that the tooltip has position absolute and high negative top. You can set a smaller top like:

.con-tooltip {
  position: relative;
}
.con-tooltip:hover:before {
  border: 1px solid #fc0;
  padding: 3px 6px;
  background: #fffea1;
  content: attr(data-title);
  font-size: 1.7em;
  position: absolute;
  left: 0;
  top: -10px;/*set a smaller value for top*/
  z-index: 999999;
  overflow: visible;
}
<p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
<p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>

After your comment I will try to solve your issue using white-space: nowrap; in class .con-tooltip:

.con-tooltip {
  position: relative;
  white-space: nowrap;
}
.con-tooltip:hover:before {
  border: 1px solid #fc0;
  padding: 3px 6px;
  background: #fffea1;
  content: attr(data-title);
  font-size: 1.7em;
  position: absolute;
  left: 0px;
  top: -10px;
  z-index: 999999;
  overflow: visible;
}
<table>
  <tr>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions