Allow Bootstrap4's popover to overflow screen

Question

I'm trying to use BS4's Popper.js-based popover feature.

I'm adding content to it dynamically on shown event and I need it to stay anchored to the triggering button and let the body scroll instead of shifting to the top of the screen when there is no space down for its contents.

I really thought this answer should have been on cue but unfortunately no.

Next examples were made with static content, but I'm actually populating the popover with dynamic content on page load, so please take it into account in your answers/comments.

thanx

EXAMPLE WITH LITTLE CONTENT

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

button{
  position: absolute;
  right: 0
}

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


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="WANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

EXAMPLE WITH LOTS OF CONTENT

$('#show-popover').popover({
        container: 'body',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});

button{
  position: absolute;
  right: 0
}

#explain{
position: absolute;
left: 0;
display: none
}

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


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover" data-placement="bottom" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

score 0 · Answer 1 · answered Oct 20 '18 at 22:59

Change the container from body to the button you wanted attached to and it will render the popup inside the button. You will then have to alter the css a little to fit your needs. Example:

$('#show-popover').popover({
        container: '#show-popover',
        html: true,
        offset: 100,
        positionFixed: true
});

$('#show-popover').click(()=>{
  $('#explain').show();
});

button{
  position: absolute;
  right: 10px;
  width: 200px;
}

button .arrow {left:50%; margin-left: -8px;}
button .popover {top: 20px !important;}

#explain{
position: absolute;
left: 0;
display: none
}

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


<!--THIS IS WITH STATIC CONTENT AND IT DOES NOT WORK EITHER-->
<br/>
<div id="explain">As you can see, it jumps to the top of the page, <br/>instead of staying anchored to the button</div>
<button id="show-popover"  data-placement="top" tabindex="0" class="btn btn-sm btn-light" role="button"
                            data-toggle="popover" title="UNWANTED BEHAVIOR" data-display="static" data-flip="static" data-content="<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>">
                        TRIGGER
                    </button>
                    
                    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

you changed `data-placement` to `top`, that's the reason it works in the snippet, but I need it to be `bottom` because in my site, the trigger button is not at the top of the page and setting it to `top` would, of course, make the popover show on top when it does not have a lot of content in it — Scaramouche, Oct 21 '18 at 02:39
No, that was just for the arrow. For some weird reason, it was placing the arrow at the bottom (I think this is due to the absolute positioning of the button). I still think this is the solution. Rendering the popup inside the button and positioning it with a little bit of css. — Iulius, Oct 21 '18 at 07:57

Allow Bootstrap4's popover to overflow screen

1 Answers1