Search code examples
csstooltipcss-position

Pure CSS Tooltip: content gets cut off

I'm trying to add tooltips on my forum (inside messages). It works with short tooltips:

small tooltip

But with long tooltips I get this:

big tooltip

The text is cut off. Changing the position property for [data-tooltip] from relative to absolute (see the code below) fixes the problem but makes the text overlap:

text overlapping

I'm using this code:

div.bb-tooltip {
  display: inline-block;
  border-bottom: 1px dotted black; 
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
  display: none;
  position: absolute;
  top: 0;
}

[data-tooltip]:before {
  border-bottom: .6em solid black;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  left: 20px;
  margin-top: 1em;
}

[data-tooltip]:after {
  background-color: black;
  border: 4px solid #010101;
  border-radius: 7px;
  color: #ffffff;
  content: attr(data-tooltip-message);
  left: 0;
  margin-top: 1.5em;
  padding: 5px 15px;
  white-space: pre-wrap;
  max-width: 350px;
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
  display: block;
}

HTML of the message:

very very <div class="bb-tooltip" data-tooltip data-tooltip-message="this is a long text! the quick brown fox jumps over a lazy dog! lorem ipsum dolor sit amet. Very very long text!">looooooooonnnnnnngggggg</div> tooltip! text text text

(code taken and adapted from: https://codepen.io/trezy/pen/Khnzy)

Adding a z-index property with high value does not fix the problem. How to fix this problem?

Another problem is: for short texts (see the first image) I get the text wrap at every word. I want it to wrap only when the length gets too long.

Live sample: https://www.inforge.net/xi/threads/tooltip-test.450399/

Solution

  • The problem is your CSS rule(s) .message .messageContent and .messageInfo has overflow: hidden which cuts off a too high tooltip.

    Changing both to overflow: visible (or remove them fully) solves the problem.

    Update

    About the text wrap at every world, update this CSS rule [data-tooltip]:after{min-width: 100px;background-color:black;... with a min-width seems to solve that.