title: Keeping an absolute positioned element's width dependent on its text content's preferred width
body: <p>I'm positioning elements containing only text inside another element using absolute positions (think Tooltips).</p>
  
  <p>The width of the Tooltip element should be according to its text content with some maximum width - sometimes it's only a word, sometimes multiple lines.<br>
  I need to be able to set the left-aligned position of the tooltip element and move it outside of the containing box.</p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="tooltip"&gt;Sed venenatis diam ligula, at sagittis arcu blandit in.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>.container {
      position:relative;
      width:100%;
      height:100px;
  }
  .tooltip {
      position:absolute;
      top:0;
      left:0;
      max-width: 150px;
      padding: 20px;
  }
  </code></pre>
  
  <p>Now, as soon as I move the Tooltip element towards the right edge of its container it shrinks to fit into that container.  </p>
  
  <p>Here's an interactive Fiddle illustrating the problem: <a href="http://jsfiddle.net/meyertee/GKFXN/" rel="nofollow">http://jsfiddle.net/meyertee/GKFXN/</a></p>
  
  <p>Is there a pure CSS way to make the Tooltip element behave on the right side as it does on the left side - i.e. make itself as wide as the text would prefer to be?</p>