Preventing element width reduction

Question

I have a tooltip with some text, and in order to control the position of the tooltip relative to the cursor using CSS, I placed it in a div with a zero size. Javascript moves the outer div, and the tooltip can be aligned using any of the top / right / left / bottom attributes, depending on which side it should be placed on.

However, this creates a new problem - the contents of the tooltip now try to use as little width as possible. I cannot disable wordwrap because it has to fit on mobile screens. Without an external container, it works great, stretching to the edge of the window. Is there a way to ignore the outer container when calculating line breaks?

From what I can tell, the tooltip no longer “sees” the body element, so it cannot know how much it can stretch. However, controlling the position of the tooltip directly using Javascript is more difficult if I need to align the bottom or the right side - I must either consider the size of the tooltip (which may vary depending on its position), or set the bottom / right properties and consider window size.

Here is an example: http://jsfiddle.net/03gdomLt/1/
The first tooltip works correctly, and the second one tries to compress to zero width.

.tip-outer {
    position: absolute;
    top: 200px;
    left: 100px;
}
.tooltip {
    position: absolute;
    left: 10px;
    top: 10px;
    border: 1px solid black;
}

<div class="tip-outer">
    <div class="tooltip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
    </div>
</div>
<div class="tooltip">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>

Answer 1

0, - , . , div (tip-outer) left:100px, , , .

css, . ​​

@media only screen 
and (max-width : 400px) {
    .tip-outer .tooltip{
        left: -90px;
    }
}

Answer 2

, , , .

http://jsfiddle.net/03gdomLt/3/

.tip-outer {
    position: absolute;
    top: 200px;
    left: 100px;
}
.tooltip {
    position: relative;
    left: 10px;
    top: 10px;
    border: 1px solid black;
    //white-space: pre-wrap;
}

<div class="tip-outer">
    <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>
</div>
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>