<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/3809354/2929212/cd93fdd0-d786-11e3-948c-f5c27fdccf60.png"><img src="https://cloud.githubusercontent.com/assets/3809354/2929212/cd93fdd0-d786-11e3-948c-f5c27fdccf60.png" alt="picture1" style="max-width: 100%;"></a></p>
<p dir="auto">Problem first occurred in my website, which i updated today to 3.1.1 from 3.0.3(Worked fine). All of the dropdowns appeared in the left even if the button is in extreme right.<br>
This problem also exists in the new version of Mozilla 29.0. Works fine in IE11. No clue for Chrome</p>
<p dir="auto">I'm getting this bug in my app on Chrome and even see it happening on <a href="http://getbootstrap.com/javascript/#tooltips" rel="nofollow">http://getbootstrap.com/javascript/#tooltips</a> Using Chrome 30.0.1599.66 on Ubuntu 12.10.</p>
<p dir="auto">So when I mouseout of the element in question it leaves behind a pale gray version of the tooltip. Then if I move my mouse around some more, say over a link or an input, then the tooltip disappears. I'm pretty sure this is not the desired behaviour for the tooltip, because that's just plain weird. Once you mouseout of the tooltip() element, that tooltip should not be visible anymore. I have Firefox as well and its not an issue there, seems this is just a webkit bug.</p>
<p dir="auto">I'm especially able to duplicate this on my own app by moving out of the element and straight onto the tooltip itself, and then moving out from there. The faded gray tooltip will reside until I mouse onto a link or whatnot.</p>