Angular2: Open ngbPopover containing image delayed on hover

Question

First of all: I created a plunkr to show the problem: http://plnkr.co/edit/5IhhqtofCvqqr5x9P0De?p=preview

I want to open a ngbPopover (with image) delayed on hovering an element. I use (mouseover) and (mouseleave) in combination with triggers="manual". Inside the opening function i use setTimeout which triggers the popover opening. Everything works fine but not on the first execution. As you can see on the picture the popover is placed wrongly.

On the second, third, ... hover everything works fine. When i remove the timeout function it works, too, but that's not my goal.

Answer 1

So, this is a tricky one! Before I suggest a work-around (as I'm not sure there is a way of "fixing" it), let me explain what is going on here.

In order to position elements properly we need to know exact size of an element to be positioned. In your particular case the exact size is only known after a browser loaded an image.

There are 2 basic ways of working-around the issue:

• re-position popover after image has been loaded
• give image a size upfront.

The problem with re-positioning popover after image load is that you would have to listen to <img>'s onload event and then force re-positioning. This is cumbersome and today's implementation of ng-bootstrap popover doesn't have any method of forcing re-positioning (although we could easily add one!).

What I would suggest instead is to give the <img> element initial size so when we position things the exact dimensions are known before image loads. Ex. width="200px" height="140px" like so:

<ng-template #popContent let-greeting="greeting">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Crested_Tern_Tasmania_%28edit%29.jpg/1600px-Crested_Tern_Tasmania_%28edit%29.jpg" 
width="200px"
height="140px">
</ng-template>

With the fixed dimensions of an image things start to work as expected: http://plnkr.co/edit/QUxBX1KCPVaAkIfBH0P8?p=preview

Answer 2

try use this property its is simplest and cleanest solution. Basically, default value for trigger is click. but is you just can change that property to triggers="hover" it will help you up