<p dir="auto">Hopefully you can see a demonstration here, although it may depend on your browser font sizes: <a href="http://jsbin.com/hofeg/2/edit" rel="nofollow">http://jsbin.com/hofeg/2/edit</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/754175/3360485/5a8415c4-faf3-11e3-8961-7ebf526d8500.png"><img src="https://cloud.githubusercontent.com/assets/754175/3360485/5a8415c4-faf3-11e3-8961-7ebf526d8500.png" alt="screenshot from 2014-06-23 17 26 24" style="max-width: 100%;"></a></p>
<p dir="auto">If the tooltip appears too close to the edge of the container, then the browser reshapes it to stay inside the container. Tooltip doesn't properly account for this change in size.</p>
<p dir="auto">It seems to attempt to; at the end of applyPlacement it tried to reposition the arrow:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition)"><pre class="notranslate"><code class="notranslate">this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], arrowPosition)
</code></pre></div>
<p dir="auto">Before this line, the arrow is actually in the right place. After it, the arrow has moved to somewhere behind the tooltip, so it's not visible.</p>
<p dir="auto">The placement of the tooltip arrow appears to get cached in some situations, meaning it won't always be centered. Please see a reduced test case: <a href="http://jsfiddle.net/ytD5t/8/" rel="nofollow">http://jsfiddle.net/ytD5t/8/</a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2069528/2751283/3fce9944-c8c0-11e3-9f2b-6d348fde31c7.png"><img src="https://cloud.githubusercontent.com/assets/2069528/2751283/3fce9944-c8c0-11e3-9f2b-6d348fde31c7.png" alt="example" style="max-width: 100%;"></a></p>