How to use popper with Angular

Question

I'm trying to create a lib for my app which will use a directive as a popper trigger and hint target. This directive uses '@ContentChild' for getting ng-template what I want to show in a hint.

The problem is that nothing is actually working.

Here is what I've done so far https://stackblitz.com/edit/angular-nwojkq

I cannot understand from docs how to use this lib all. I've tried to inspect the nodes and the this.popper reference for clues but no success. Haven't found any method to have "hover" trigger to show popover.

---

The question is how should I show/hide the popper .

And is it possible to create a DOM element and use it as popper hint inner without attaching it to the body.

The popper object is being successfully created, however I cannot find out how to work with it. Reading popper.js docs only added mess to my head.

---

Update #1

Looks like the popper actually works however it is simply shown instead of hiding when it's not hovered.

Is there any methods to enable/disable Popper then? I don't want it to keep track while the element is not hovered.

Answer 1

I'm not deleting this question to help others who is in situation like me.

1) make sure that you are using an inline-block or inline element as a popper element (the element to be positioned)

2) Make your html height enough to scroll your element off screen

3) Try to scroll it off

In my case it occurred that Popper was successfully created and working. My placement is 'top' and when I scrolled the page to make my anchor element (the one I'm trying to position hint to) off screen I've seen that my hint was moved under the target element what means that Popper actually worked.

Here is a small post about how to use Popper.js in Angular. Hope this will help someone.