title: CSS tooltips won't stretch, can only have fixed width
body: <p>I have tooltips whose content can range from very long to very short. I don't want to have 3 words' worth of content and have a huge tooltip, but I also don't want 20 words and have it all scrunched up on multiple lines. With this current setup, it stays stuck at the minimum width regardless.</p>
  
  <p>The CSS:</p>
  
  <pre><code>.tooltip {
    outline: none; position: relative;
    min-width: 75px; max-width: 255px;
  }
  
  .tooltip .tool-content {
    opacity: 0; visibility: hidden;
    position: absolute;
  }
  
  .tooltip:hover .tool-content {
    background: #999; border: 1px solid #555; color: #000000;
  
    /* general styling */
    position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
    visibility: visible; opacity: 1;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class='tooltip'&gt;
  (content to hover)
      &lt;span class='tool-content'&gt;
          (tooltip content)
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What troubles me is that I can take off position: relative and it works as intended! Yet I can find no work around, and relative positioning is key (or appears to be?) to having CSS hovers.</p>