title: bootstrap tooltip on mouse move - tooltip appears far from the mouse?
body: <p>I have a list of images and I want the tooltip to appear and follow the mouse when you hover the image. Following this <a href="https://stackoverflow.com/questions/34034163/how-to-make-bootstrap-3-tooltip-follow-mouse">answer</a>. I have modified the code so I can use it for multiple images. But the tooltip sometime appears <strong>very far</strong> away from the mouse, sometimes it is ok. Why?</p>
  
  <p>The tooltip flickers as well. Why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-item {
    display: block;
    margin: 5px;
    border: 1px solid red;
  }
  
  .col-lg-1,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-md-1,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-xs-1,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9 {
    padding-left: 0;
    padding-right: 0;
    padding: 0;
  }
  
  .flex-centre {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /*height: 100%;
          width: 100%;*/
  }
  
  ul li {
    margin: 10px;
  }
  
  .img-tooltip {
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div class="container"&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-md-3"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;a href="#" class="grid-item"&gt;
            &lt;img class="img-responsive img" src="http://placehold.it/800x1240" alt=""&gt;
            &lt;i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 1" data-animation="false" data-trigger="manual"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-6"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;a href="#" class="grid-item"&gt;
            &lt;img class="img-responsive img" src="http://placehold.it/800x603" alt=""&gt;
            &lt;i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 2" data-animation="false" data-trigger="manual"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-3"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;a href="#" class="grid-item"&gt;
            &lt;img class="img-responsive" src="http://placehold.it/800x600" alt=""&gt;
            &lt;i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12"&gt;
          &lt;a href="#" class="grid-item"&gt;
            &lt;img class="img-responsive" src="http://placehold.it/800x600" alt=""&gt;
            &lt;i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
    $(".img").on('mousemove', function(e) {
      var context = $(this).parent();
      $(".img-tooltip", context).css({
        top: e.pageY,
        left: e.pageX
      });
      $('[data-toggle="tooltip"]', context).tooltip('show')
    })
  
    $(".img").on('mouseleave', function(e) {
      var context = $(this).parent();
      $('[data-toggle="tooltip"]', context).tooltip('hide')
    })
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas? How can I fix these bugs above?</p>
  
  <p>Notes: you will see what I mean when you run the code on 'Full Page'</p>