title: On mouse hover, detect if element is at right edge of window and move the element over - jQuery
body: <p>I've created a tooltip that displays on mouse hover of an element. The tooltip's <code>fixed</code> position is calculated based on the current position of the mouse. So depending on where the mouse hovers over the element, the tooltip will display there. It works fine, until it's close to the edge of the screen.</p>
  
  <p>For example, as long as the edge of the tooltip does not reach the edge of the window, the width of the tooltip is unaffected. (See below image)</p>
  
  <p><a href="https://i.stack.imgur.com/SxhTO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxhTO.jpg" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>However, when you mouse over the element and its close enough to the edge of the window, the width of the tooltip is squashed. (See below image)</p>
  
  <p><a href="https://i.stack.imgur.com/Vh7Sp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vh7Sp.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>How can I push the tooltip over so that the width is unaffected when the hover occurs too close to the edge of the window? Here's my code for displaying the tooltip.</p>
  
  <p>The default <code>offset</code> variable I want to be set at 150, which places the center of the tooltip directly under the mouse cursor. That is where I normally want it. But when it's at the edge of the screen, I want it to move over slightly, so I have it set at 300.</p>
  
  <p>But it's not working. The tooltip doesn't move over.</p>
  
  <pre><code>/* Custom Shop Page Toolip */
  $('.product-bottom-info-container').hover(function(e) {
      var window_Width = $(window).width();
      var tooltip = $(this).find('.product-custom-tooltip-container');
      var offset;
  
      if ((tooltip.offset().left + tooltip.outerWidth()) &gt;= window_Width) {
          offset = 300;
      }
      else {
          offset = 150;
      }
  
      $(this).find('.product-custom-tooltip-container').css({
          display: 'inline-block',
          position: 'fixed',
          zIndex: '5000',
          top: e.pageY,
          left: e.pageX - offset
      });
  }, function() {
      $(this).find('.product-custom-tooltip-container').hide();
  });
  </code></pre>
  
  <hr>
  
  <p>The part that is supposed to move the tooltip over is this</p>
  
  <pre><code>    var window_Width = $(window).width();
      var tooltip = $(this).find('.product-custom-tooltip-container');
      var offset;
  
      if ((tooltip.offset().left + tooltip.outerWidth()) &gt;= window_Width) {
          offset = 300;
      }
      else {
          offset = 150;
      }
  </code></pre>
  
  <p>But this is not working.</p>