Close tooltip on click outside of it

Question

I am trying to make my tooltip notification text to be able to close on click anywhere outside on the 150x150 box also because right now I only manage to close the tooltip if the box is clicked again.

Here is my code until now. Any ideas ?

This answer by @Junaid cannot help me because when I implement it with my code, my tooltip does not show on click. May i receive accurate answer to my problem ?

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"
});

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

<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>

Js fiddle example fiddle

Answer 1

Look at the example below (removed the hide/show onClick to simplify the example). This shows how you can handle mouseout method to remove the popover, whilst cleaning up the event after it self.

var $hasToolTip = $(".inner");

$hasToolTip.tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});

$hasToolTip.on("click", function(e) {
  var $this = $(this);
  e.preventDefault();

  // create event handler as we need to remove event when done
  function onWindowClick() {
    $this.tooltip("hide");
    // remove the event
    $('.fakebox').off('mouseout', onWindowClick);
    $('.fakebox').css({display:'none'});
  }

  // add the event
  $('.fakebox').on('click', onWindowClick);
  $('.fakebox').css({display:'block'});
  $(this).tooltip("show");
})

.container { width: 960px; margin: 0 auto; }
.outer { width: 150px; height: 150px; }
.fakebox {display:none; width:100%; height: 100%; position:fixed;}

<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="fakebox"></div>
<div class="container">
  <div class="outer">
    <div class="inner" tab-index="0" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

Answer 2

Here is what I suggest. ( Working JsFiddle )

• Use the tooltip('toggle') for toggling the show and hide of the tooltip when you click, This removes the overhead of manually tracking the active tooltip element.
• To close the tooltip on click anywhere outside, Attach a click event to your body and when ever there is a click check if it was on a div element with class .inner if so then we have to hide all tooltips except this one, else hide all.

Below is the working sample. I have added more div elements so that you can test all possible cases.

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');
  }
});

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

<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>