livestack livestack - 1 month ago 26
Javascript Question

jQuery/Bootstrap popover hide clicking on outside of content placeholder div

I am new jQuery and boostrap. Using boostrap popover I have implemented multiple popover for a single page. My popover html and js script as followings:

<a data-toggle="popover" class="btn popper btn-default ">
Click me 1
</a>
<div class="popper-content hide profile-popover">
This content place for click me 1 button
</div>

<a data-toggle="popover" class="btn popper btn-default ">
Click me 2
</a>
<div class="popper-content hide profile-popover">
This content place for click me 2 button
</div>


js scripts for that :

<script>
$(document).ready(function(){
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
});
</script>


Pop over works fine but now I am trying implement a scripts that will hide all open popover throughout my page if anyone clicked outside of the popover content.

Here is the my full code snippet please check and let me know how can I hide all open popover if clicked on outside of content places.



$(document).ready(function(){
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
});

<!DOCTYPE html>
<html lang="en">
<head>
<title>Popover</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>

<div class="container">
<h3>Popover </h3>
<a data-toggle="popover" class="btn popper btn-default ">
Click me 1

</a>
<div class="popper-content hide profile-popover">
This content place for click me 1 button
</div>

<a data-toggle="popover" class="btn popper btn-default ">
Click me 2

</a>
<div class="popper-content hide profile-popover">
This content place for click me 2 button
</div>

</div>



</body>
</html>




Answer

Just simply add following codes inside of your document $(document).ready function hopefully your aspect will be resolved:

$(document).mouseup(function (e) {
  if(!($(e.target).hasClass("popover-content"))){
    $(".popover").popover('hide');
    }
});

I have attached jQuery and html code snippet as following:

    $(document).ready(function(){
    $('.popper').popover({
      placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
      }
     });


    $(document).mouseup(function (e) {
          if(!($(e.target).hasClass("popover-content"))){
       		$(".popover").popover('hide');
    		}
     });




     });
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Popover</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="container">
  <h3 class="popper-content dd">Popover </h3>
                                 <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 1
                                           
                                 </a> 
                                   <div class="popper-content hide profile-popover">
                                             This content place for click me 1 button
                                    </div>

                                       <a  data-toggle="popover" class="btn popper btn-default ">                                           
                                        Click me 2
                                           
                                        </a> 
                                    <div class="popper-content hide profile-popover">
                                             This content place for click me 2 button
                                    </div>
 
</div>

</body>
</html>

Run and check whether your issue resolves.

Comments