Hide tool tip on clicking outside is not working Jquery

Question

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>

What is exactly the problem? If I click the button, the popover opens. If I click outside, the popover closes. If I click the button twice again, the popover opens again. — Patrick Schocke, Oct 29 '18 at 13:08
@KuebelElch15 I believe it is the last part, You should not be needed to click twice. — Carsten Løvbo Andersen, Oct 29 '18 at 13:23

score 0 · Accepted Answer · answered Oct 29 '18 at 13:28

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>

Thanks KuebelElch15, I am not able to close the tooltip in clicking the popover button.. Any suggestion..? — kiran, Oct 30 '18 at 07:43
You can change the delay of displaying the popover by changing the delay values. — Patrick Schocke, Oct 30 '18 at 07:48
If this serves your needs, please consider to mark this answer as accepted so that someone that comes later to this question sees that this answer is the correct one. — Patrick Schocke, Oct 30 '18 at 07:49

Hide tool tip on clicking outside is not working Jquery

1 Answers1

Linked