Change top or bottom position of bootstrap popover on content position

Question

I use Bootstrap v.3.3.7 and have one dynamic content editor. All options for that editor are stored inside the popover.

I have a problem when some of the content is at the bottom or top because of popover push content and whole page. Here are examples:

I generally want, if popover goes out of margins to automatically change position. It goes out from top side of the window to popover be bottom or if go totally bottom to show position top.

Answer 1

You can use data-placement="auto"

When "auto" is specified, it will dynamically reorient the popover.

For example, if placement is "auto left" , the popover will display to the left when possible, otherwise it will display right.

 $(function() { $('[data-toggle="popover"]').popover() }) 

 .flex { display: flex; height: 50vh; justify-content: space-between; align-items: flex-start; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="flex"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover Auto position </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover Auto position </button> </div> <div class="flex" style="align-items: flex-end;"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover Auto position </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover Auto position </button> </div> 

Answer 2

making position absolute will do the trick for you . however you can try it in the different way . here is the example of how you can do it

https://getbootstrap.com/docs/3.3/javascript/

Answer 3

This might not be helpful to you, but you could always use float:right; and then do some padding or margins. Again, this might not be very helpful, but I'm pointing it out in case it is.

PS As said above, you can also use data-placement="auto"