2

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.

Sergey
  • 7,184
  • 13
  • 42
  • 85
  • 1
    Possible duplicate of [Angular 6 + Popper.js (without jQuery)](https://stackoverflow.com/questions/50456299/angular-6-popper-js-without-jquery) – nircraft Aug 02 '19 at 14:34
  • see this answer: https://stackoverflow.com/a/50456529/9386929 – nircraft Aug 02 '19 at 14:34
  • @nircraft I don't understand what it has to do with my case – Sergey Aug 02 '19 at 14:39
  • I don't have problems with importing popper. I have problems with its usage. I import it using dynamic webpack imports for the sake of lightweight of my app – Sergey Aug 02 '19 at 14:40
  • Why not remove the library altogether and use the already existing Angular module: https://github.com/MrFrankel/ngx-popper? It's actually recommended on the official github – Mickers Aug 02 '19 at 15:05
  • @Mickers because the less extra code you use the less bugs and vulnerabilities you have. I need a simple implementation without all of that features (some of them it may even lack of). – Sergey Aug 02 '19 at 15:38
  • There is no way to hide/show a popper instance. You can just detroy it and recreate it. See https://github.com/FezVrasta/popper.js/issues/51 – Jota.Toledo Aug 02 '19 at 15:54
  • @Jota.Toledo could you please tell me what is `removeOnDestroy` for? I've read the docs but "it removes the popper" doesn't tell me anything – Sergey Aug 02 '19 at 15:55
  • No idea, I dont use that lib :D – Jota.Toledo Aug 02 '19 at 16:14

1 Answers1

2

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.

Sergey
  • 7,184
  • 13
  • 42
  • 85