Display Bootstrap Popovers Outside Divs with Overflow:Hidden

Bootstrap PopConfirm popovers don't show above a div where overflow:hidden

From the question : Make bootstrap popover overlap i found the solution.

I added a "container" parameter to the lastest version. Please use the lastest version available in the github.

bootstrap popover showing outside div area

Try adding a display property of "inline-block" to the test class. That should limit the hover coverage to 100 x 100 pixels.

.test {
    width:100px;
    height:100px;
    background:Red;
    overflow:hidden;
    display: inline-block;
  }

Bootstrap 4 Popover show/hide div

As you are appending i.e : $('#popover-content').html() content dynamically to popover so you need to bind your click handler to some static element and use class selector instead of id to get reference of hidden-content using $(this).parent().find('.hidden-content').toggle(); to hide and show same .

Demo Code :

$(function() {

  $('#show-popover').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      return $('#popover-content').html();
    }

  })

});

//call handler like below ..
$(document).on('click', '.card-body > #show-div', function() {
  //then use .find to get the div and then show/hide
  $(this).parent().find('.hidden-content').toggle();

});

.d-none {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="text-center">

  <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>

</div>

<!-- popover content -->

<div id="popover-content" class="d-none">
  <div class="card border-0">
    <div class="card-body">
      <a href="#" id="show-div">Show more content</a>
      <div class="hidden-content d-none">
        div with more content...
      </div>
    </div>
  </div>
</div>

Can Bootstrap 3 popovers use an external div for content?

Use the content option of the popover function to pass the content:

{
    content: $('#myPopoverContent').text()
}

To be able to use HTML content, use:

{
    content: $('#myPopoverContent').html(),
    html: true
}

I’ve prepared a working example for you.

bootstrap popover not showing on top of all elements

I was able to solve the problem by setting data-container="body" on the html element

HTML example:

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript example:

$('your element').tooltip({ container: 'body' })

Discovered from this link: https://github.com/twitter/bootstrap/issues/5889

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

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>

If i give overflow:hidden to my popover , arrow is getting hidden. How to avoid this?

Add overflow:hidden to the CSS class .popover-content instead, as follows:

.popover-content {
    overflow:hidden;
}

This way the arrow will not be influenced, just the text inside the popover body.

dev tools view of popover code

Updated your fiddle: https://jsfiddle.net/66uqd12s/174/