bootstrap tooltip on mouse move - tooltip appears far from the mouse?

I have a list of images and I want the tooltip to appear and follow the mouse when you hover the image. Following this answer. I have modified the code so I can use it for multiple images. But the tooltip sometime appears very far away from the mouse, sometimes it is ok. Why?

The tooltip flickers as well. Why?

.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;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">

  <div class="row">

    <div class="col-md-3">
      <div class="col-md-12">
        <a href="#" class="grid-item">
          <img class="img-responsive img" src="http://placehold.it/800x1240" alt="">
          <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 1" data-animation="false" data-trigger="manual"></i>
        </a>
      </div>
    </div>

    <div class="col-md-6">
      <div class="col-md-12">
        <a href="#" class="grid-item">
          <img class="img-responsive img" src="http://placehold.it/800x603" alt="">
          <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 2" data-animation="false" data-trigger="manual"></i>
        </a>
      </div>
    </div>

    <div class="col-md-3">
      <div class="col-md-12">
        <a href="#" class="grid-item">
          <img class="img-responsive" src="http://placehold.it/800x600" alt="">
          <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"></i>
        </a>
      </div>
      <div class="col-md-12">
        <a href="#" class="grid-item">
          <img class="img-responsive" src="http://placehold.it/800x600" alt="">
          <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"></i>
        </a>
      </div>
    </div>

  </div>

</div>


<script type="text/javascript">
  $(".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')
  })
</script>

Any ideas? How can I fix these bugs above?

Notes: you will see what I mean when you run the code on 'Full Page'

Solution

By the way you're the first one ever who used my code (the link you shared).

Well try this. https://jsfiddle.net/cexzj7mm/1/

Added 'static' class in col-md-3, col-md-6 and col-md-12 because bootstrap changed position to relative. By changing it to position static allows you to move tooltip over image properly. 'static' contains position static code.

CSS

.static {
    position: static;
}

HTML

<div class="col-md-3 static">
<div class="col-md-12 static">
    ...

I've also made some improvement in JavaScript.

JavaScript

$(".img").on('mousemove', function(e) {
  var tooltip_I_Tag = $(this).next();
  var position = (tooltip_I_Tag.attr("data-placement") != "") ? tooltip_I_Tag.attr("data-placement") : "right";
  var top = 0;
  var left = 0;
  if (position == "right") {
    top = +10;
    left = +10;
  } else if (position == "left") {
    top = +10;
    left = -10;
  } else if (position == "top") {
    top = 0;
    left = 0;
  } else if (position == "bottom") {
    top = 20;
    left = 0;
  }
  tooltip_I_Tag.css({
    top: (e.pageY + top),
    left: (e.pageX + left)
  });
  tooltip_I_Tag.tooltip('show');
});

$(".img").on('mouseleave', function(e) {
  $($(this).next()).tooltip('hide');
});