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>

CSS

.container { width: 960px; margin: 0 auto; }
.outer { width: 150px; height: 150px; }

JavaScript

var hasToolTip = $(".inner");

hasToolTip.on("click", function(e) {
  e.preventDefault();
  var isShowing = $(this).data("isShowing");
  hasToolTip.removeData("isShowing");
  if (isShowing != "true") {
    hasToolTip.not(this).tooltip("hide");
    $(this).data("isShowing", "true");
    $(this).tooltip("show");
  } else {
    $(this).tooltip("hide");
  }
}).tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});