Bootstrap popover is blinking on hover

Question

I've created a toggled sidebar with icons. I wanted to describe the icon by boostrap popover, but there is a bug with the popover if hovering it from the left side. The popover starts to blink.

When I'm hovering the icon from the bottom, the popover will be shown. (Without content, anyway...)

I added a minified snipped of my code. Is there a Problem with padding?

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

.left-side {
  width: 100%;
  background: #CCC;
  margin-right: 100px;
}

.right-side {
  position: absolute;
  right: 0;
  top: 10px;
  width: 80px;
  height: 200px;
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
}

.pmo-icon {
  display: block;
  padding: 20px
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="left-side">
  <h1>title</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="right-side">
  <div class="pmo-icon" data-html='true' data-toggle='popover' data-trigger='hover' data-placement='left' title='My title' data-content="<p>Lorem ipsum</p>">
    <i class="fa fa-home"></i>
  </div>
</div>

where you want to show popover? do you want to show on icon or right side bar — Udhay Titus, Jun 18 '17 at 09:05

Falcoa · Answer 1 · 2019-06-25T22:55:14.433

I had this same problem, and I solved it with the option boundary, like the following:

$('[data-toggle="popover"]').popover({
    boundary:'window',
    html: true
  })

In my case, without the boundary option defined, the popover was constrained to the space existing in the sidebar, and so it was being positioned over the icon. Consequently, because the popover was appearing over the icon, when I hover the icon the popover appears, and because it's over the icon it means that my mouse is no longer hovering the icon, so the popover disappears, then because the mouse is still over the icon, the popover appears and because of that the mouse does not touch the icon again, so the popover disappears, etc, etc, producing the blinking.

Using the option boundary, the popover appears where it should, not over the icon and no more blinking on hover.

This worked! Wasted a LOT of time trying to resolve this. In my case I had a stack of check-boxes with popovers containing HTML. The problem however, only occurred on the top control(??!). thx — JonV, Mar 21 '22 at 06:02

score 5 · Accepted Answer · answered Jun 18 '17 at 09:28

just you can change property of .popover class it'll works

.popover{
margin-right:0;
width:100px;
}

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

.left-side {
  width: 100%;
  background: #CCC;
  margin-right: 100px;
}

.right-side {
  position: absolute;
  right: 0;
  top: 10px;
  width: 80px;
  height: 200px;
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
}

.pmo-icon {
  display: block;
  padding: 20px;
}
.popover{
margin-right:0;
width:100px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<div class="left-side">
  <h1>title</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="right-side">
  <div class="pmo-icon" data-html='true' data-toggle='popover' data-trigger='hover' data-placement='left' title='My title' data-content="<p>Lorem ipsum</p>">
    <i class="fa fa-home"></i>
  </div>
</div>

Bootstrap popover is blinking on hover

2 Answers2