Prevent element width from shrinking <p>I have a tooltip with some text, and in order to control the tooltip's position relative to the cursor with CSS, I placed it inside a zero-sized div. Javascript moves the outer div, and the tooltip can be aligned via any of the top/right/left/bottom attributes, depending on which side it should be placed on.</p> <p>However, this creates a new problem - the tooltip contents now tries to use as little width as possible. I can't disable wordwrap because it needs to fit on mobile screens. Without the outer container, it works perfectly, stretching up to the window edge. Is there a way to ignore the outer container while calculating the line breaks?</p> <p>From what I can tell, the tooltip no longer 'sees' the body element so it can't know how much it can stretch. However, controlling the tooltip position directly via Javascript is more complicated if I need to align the bottom or right sides - I have to either consider tooltip size (which can change depending on its position), or set bottom/right properties and consider window size.</p> <p>Here's an example: <a href="http://jsfiddle.net/03gdomLt/1/" rel="nofollow">http://jsfiddle.net/03gdomLt/1/</a><br> The first tooltip works correctly, while the second one tries to shrink to zero width.</p> <pre><code>.tip-outer { position: absolute; top: 200px; left: 100px; } .tooltip { position: absolute; left: 10px; top: 10px; border: 1px solid black; } &lt;div class="tip-outer"&gt; &lt;div class="tooltip"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus. &lt;/div&gt; &lt;/div&gt; &lt;div class="tooltip"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus. &lt;/div&gt; </code></pre>