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

You can achieve this by this way. I have added an extra ID in div that is containing the image.

<script>
        $(document).ready(function(){
            $("#ImageTooltip").tooltip({
              delay: {show: 0, hide: 300},
              trigger :'manual'
            }); 
        
            $('#ImageTooltip').on('click', function (e) {
              $('#ImageTooltip').tooltip('show');
        
            });
        
            $(document).mouseup(function (e) { 
              if ($(e.target).closest(".tooltip-inner").length === 0) { 
                      $('#ImageTooltip').tooltip('hide');
                  } 
            }); 
        
        });
    </script>



    .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" id="ImageTooltip" 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

If you need behavior such as auto-hide Bootstrap tooltip (or popover) on focus out or click anywhere outside, use and stylize element which can be in focus. For instance BUTTON.

In template use code:

<button class="tooltip-button"
        role="button"
        data-toggle="tooltip"
        data-placement="right"
        data-html="true"
        data-trigger="focus"
        data-title="Your tooltip html code or text">*</button>

Style with SCSS to introduce button as regular text:

button.tooltip-button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
  &:not(:disabled) {
    outline: none;
  }
}

And don't forget in your base template initialize all tooltips on page:

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

Answer 3

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>

Answer 4

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>