title: bootstrap tooltip\popover - solving inconsistent placement to the left
body: <p>I've been working on a project and I've noticed some inconsistency in bootstrap's behavior that I would like to solve. </p>
  
  <p>When a popover (or tooltip, whatever, they're basically the same) is nearing the edge of the screen - if it's a right-sided one, when nearing the edge - it will contract so as not to go offscreen (it only works up to a point, but that's usually enough).</p>
  
  <p>This doesn't happen when the placement is to the left.</p>
  
  <p>i.e.:</p>
  
  <p><strong>right placement:</strong></p>
  
  <p>Normal width:</p>
  
  <p><img src="https://i.stack.imgur.com/82CXX.png" alt="enter image description here"></p>
  
  <p>Close to the edge:</p>
  
  <p><img src="https://i.stack.imgur.com/gigxt.png" alt="enter image description here"></p>
  
  <p><strong>left placement:</strong></p>
  
  <p>Normal width:</p>
  
  <p><img src="https://i.stack.imgur.com/Q8Xyi.png" alt="enter image description here"></p>
  
  <p>close to the edge:</p>
  
  <p><img src="https://i.stack.imgur.com/l5HGv.png" alt="enter image description here"></p>
  
  <p>These images are from a small <a href="http://jsfiddle.net/yuvii/gwbR2/" rel="nofollow noreferrer">DEMO</a> I wrote to illustrate the problem.</p>
  
  <p>I've messed around with the source code, so far to no avail. I can't seem to place my finger on what exactly causes this behavior in the first place.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>p.s.</strong></p>
  
  <p>I'm using Bootstrap 3.1.1. The new 3.2 does <em>not</em> solve the issue (and I would like to avoid upgrading at this point).</p>
  
  <hr>
  
  <p><strong>Major Update!</strong></p>
  
  <p>After some digging, I figured out that this has nothing to do with bootstrap - it's simple css - it seems that when you position an element absolutely and push it to the sides it will try and stay withing the screen.</p>
  
  <p>I never knew about this behavior, and it happens automatically - but only to the the direction you're pushing - i.e. a div pushed from the left will contract when reaching the right edge of the screen and vice versa. </p>
  
  <p>It just so happens that popovers are only positioned with the <code>left</code> assignment - which is why we're seeing the inconsistend behavior - when it's pushed to the right it contracts but not the other direction.</p>
  
  <p>So the solution is to assign <code>right</code> instead - sounds simple? 
  Not so much. I took the source code and manipulated it a bit, <a href="http://jsfiddle.net/gwbR2/12/" rel="nofollow noreferrer">adding these lines</a> (somewhere arond line 250 in the jsfiddle):</p>
  
  <pre><code>if (placement == 'left' &amp;&amp; offset.left &lt; 0) {
      var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 
  
      offset.left = 0;
      $tip.offset(offset);
      $tip.css({ 'right': right });
  }
  </code></pre>
  
  <p>Seems reasonable, right? If the offset to the left is less than 0 (i.e., it goes offscreen) then calculate the window width and remove from that the left offset and the width of the popover (<code>actualWidth</code>) itself and you get the distance from the right.</p>
  
  <p>Then, make sure to reset the offset left and apply the right positioning. <em>But</em>... it only sorta works - which is to say it only works the second time around. </p>
  
  <p>Check it out <a href="http://jsfiddle.net/gwbR2/12/" rel="nofollow noreferrer">for yourself</a>! Hover once, and it's misplaced, pull the mouse to the side and try again and suddenly it's positioned correctly. What the hell?</p>
  
  <p><strong>edit</strong></p>
  
  <p>Ok this seems to come up a lot, so I'll make it clear:</p>
  
  <p>I know about <code>auto</code> placement. I don't want it. <strong>I want to control where the popover goes, letting it decide automatically is not a solution to the problem, it's merely avoiding it</strong></p>