Q:

Hide tool tip on clicking outside is not working Jquery

I am not able to open the tooltip post closing the same by clicking outside the button. Appreciate the help.
Below are the ways to reproduce the issue

Click on the button
Click outside of button to close the tooltip
Click the button again to open the tooltip

Note : Button requires two clicks to open the tooltip post-closing by clicking outside of the div.
Below is the source code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Setting Container for Bootstrap 3 Popover</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Append popover HTML to wrapper element
    $("#myPopovers a").popover({
  container: '.wrapper'
 }); 
});
</script>
<script>
  $(document).mouseup(function (e){
  var container = $(".popover");
  if (!container.is(e.target) && container.has(e.target).length === 0){
    container.fadeOut();
 
  }
}); 
  
  </script>
<style type="text/css">
.bs-example {
 margin: 150px 50px;
}
.bs-example a {
 margin: 5px;
}
</style>
</head>
<body>
<div class="bs-example">
  <div class="wrapper">
    <div id="myPopovers"> <a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</a> </div>
  </div>
</div>
</body>
</html>

A:

To make your popover dismissable on the next click, just init the popover with trigger:'focus'.

$(document).ready(function(){
     $('[data-toggle="popover"]').popover({
        trigger: 'focus',
        container: '.wrapper',
        delay: {
            "show": 500,
            "hide": 100
        },
     });
});
.bs-example {
 margin: 150px 50px;
}
.bs-example a {
 margin: 5px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="bs-example">
  <div class="wrapper">
    <div id="myPopovers"> <a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</a> </div>
  </div>
</div>

