Bootstrap popovers not aligning with arrow

Question

I'm using bootstrap popovers in a project of mine, and I've encountered a problem with them. My popover is being pushed up because it hits the bottom of my visible screen, but when I scroll down, it doesn't move down aswell to align with the arrow.

Here's a picture of it happening live, see I've scrolled down but it doesn't move down with me.

EDIT: Code

$(document).ready(function(){
 $("[data-toggle=popover]").popover({
  trigger: 'hover',
  html: true
 })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.popover {
 border-radius: 0;
 border: none;
 background: none;
}
.popover.bs-popover-right .arrow::after {
 border-right-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-left .arrow::after {
 border-left-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-top .arrow::after {
 border-top-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-bottom .arrow::after {
 border-bottom-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,
.popover.bs-popover-bottom .popover-header::before {
 border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-header {
 padding: 18px 23px;
 border-radius: 0;
 color: #fff;
 background: rgba(0, 80, 173, 0.5);
 border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-body {
 padding: 19px 24px;
 border-radius: 0;
 color: #eaeaea;
 background: rgba(0, 80, 173, 0.5);
}
</style>
<body>
 <div class="container-fluid">
  <div class="row">
   <div class="col-sm-12 col-md-4" style="height: 120vh;">
    <img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
    <img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
    <img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
   </div>
  </div>
 </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

In what condition popover, not aligned please mention that state coz as I checked they are working fine. — Harden Rahul, Oct 23 '17 at 09:54
@HardenRahul I've edited the post as I've found out my issue wasn't what I thought it was. — PiggyPiglet, Oct 23 '17 at 11:35
@Sodhisaab hover over the third image (scroll down, don't go to full page) — PiggyPiglet, Oct 23 '17 at 12:34

score 0 · Answer 1 · answered Oct 23 '17 at 12:36

0

You might have an external css file which is overwriting the Bootstrap default css. (top:50%;) should work in the arrow div and need to ensure the parent div is (position: relative;) as well. The relative parent div will help the arrow div vertically middle alignment (top:50%;) as per content.

answered Oct 23 '17 at 12:36

Sukanta Sinha

1

Yeah, this just made it even worse. Although it's not a perfect solution, I'll just move the popover above the image. – PiggyPiglet Oct 23 '17 at 16:37

Bootstrap popovers not aligning with arrow

1 Answers1