Popover an image on hover flashes

Question

If you run the code snippet and hover over "Hover here", you will see a picture of grumpy cat, but the image flashes on and off repeatedly:

You might have to move your cursor off where it says "Hover here" and hover over it a 2nd time.

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

<div data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

score 1 · Answer 1 · answered Apr 25 '18 at 15:14

I would say it has something to do with the width and height of the <div> as you can see with a fixed size it works like a charm.

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

<div style="width:50px; heigth:50px;" data-toggle="popover" data-content='<img src="https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s288-mo-c-c0xffffffff-rj-k-no/photo.jpg">'>Hover here</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

ibrahim tanyalcin · Answer 2 · 2018-04-25T15:22:43.240

The reason you are observing this is because jquery adds an automatic div with class popover with absolute position. This causes it to locate on left top edge and therefore cause an accidental mouseout on your hover me text.

I would suggest modify the behavior via event.relatedTarget (if event.relatedTarget is a div with .popover class then do not fire mouseout on your hover me text, but I guess you can't modify that inside jquery).. To demonstrate what I mean here is a fiddle:

https://jsfiddle.net/ibowankenobi/o4s5Lvz7/1/

div.popover {
  display:block;
  position:relative !important;
  top:200px !important;
}

The style is an inline inside the popover div added by jquery so I had to use !important to override it.

Popover an image on hover flashes

2 Answers2