JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

CSS

.container {
  width: 960px;
  margin: 0 auto;
}
html,body{
  height:100%;
  width:100%;
}

.outer {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  margin:5px;
  float:left;
}

JavaScript

var hasToolTip = $(".inner");

hasToolTip.on("click", function(e) {
  e.preventDefault();
  $(this).tooltip('toggle');
}).tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});

$('body').on('click', function(e) {
  var $parent = $(e.target).closest('.inner');
  if ($parent.length) {
   hasToolTip.not($parent).tooltip('hide');
  }
  else{
    hasToolTip.tooltip('hide');
  }
});