title: Pure CSS Tooltip: content gets cut off
body: <p>I'm trying to add tooltips on my forum (inside messages). It works with short tooltips:</p>
  
  <p><img src="https://i.imgur.com/91zcor6.png" alt="small tooltip"></p>
  
  <p>But with long tooltips I get this:</p>
  
  <p><img src="https://i.imgur.com/zIzcSFR.png" alt="big tooltip"></p>
  
  <p>The text is cut off. Changing the position property for <code>[data-tooltip]</code> from <code>relative</code> to <code>absolute</code> (see the code below) fixes the problem but makes the text overlap:</p>
  
  <p><img src="https://i.imgur.com/uPpe2Wd.png" alt="text overlapping"></p>
  
  <p>I'm using this code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>HTML of the message:</p>
  
  <pre><code>very very &lt;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!"&gt;looooooooonnnnnnngggggg&lt;/div&gt; tooltip! text text text
  </code></pre>
  
  <p><em>(code taken and adapted from: <a href="https://codepen.io/trezy/pen/Khnzy" rel="nofollow noreferrer">https://codepen.io/trezy/pen/Khnzy</a>)</em></p>
  
  <p>Adding a z-index property with high value does not fix the problem. How to fix this problem?</p>
  
  <p>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.</p>
  
  <p>Live sample: <a href="https://www.inforge.net/xi/threads/tooltip-test.450399/" rel="nofollow noreferrer">https://www.inforge.net/xi/threads/tooltip-test.450399/</a></p>