Search code examples
angulartippyjs

Tippy/NgNeat/Helipopper How to Close on Click in Angular 11


I am using the ngneat/helipopper wrapper over Tippy.js to create a context menu. Everything works great, except for the fact that I cannot get the menu to close when I select an item. Github here: https://github.com/ngneat/helipopper

I have tried over a dozen variations, including the recommended withContextMenuVariation function (which doesn't appear to do anything).

I have a span that is using the ng-template version of tippy. The template has a component (because I need to pass in a bunch of inputs to the menu component).

Here is the span. This particular variation is a custom one, so it is entirely possible I've got something wrong in config, but the standard popperVariation has the same "won't close" issue.

<span [tippy]="upcastmenu" variation="popper"> UPCAST</span>
...
<ng-template #upcastmenu>
    <spell-upcast-menu
        [startingSpellLevel]="level$ | async"
        [spellSlots]="spellSlots$ | async"
        [spell]="charSpell"
    ></spell-upcast-menu>
</ng-template>

Tippy Variation (current):

const popoverVariation: Partial<TippyProps> = {
    animation: "scale",
    arrow: true,
    offset: [0, 10],
    trigger: "mouseenter",
    interactive: true
};
...
TippyModule.forRoot({
        defaultVariation: "tooltip",
        variations: <Record<string, Partial<TippyProps>>>{
            tooltip: tooltipVariation,
            popper: popoverVariation
        }
    })

Solution

  • Well, after trying even more configurations, I have come to the conclusion that this library just doesn't work. I downloaded the source code and tried to walk through the examples. It appears that the source and the npm install code just aren't the same. The examples include <ng-template #templateRef="tippy">, but when I compile mine I get errors that there's nothing set up as exportAs "tippy". When I tried the injection token, angular complains that there isn't a provider.

    So, my solution was to remove this library and switch to another, mdbootstrap, which has plenty of great documentation and, even better, does exactly what I need.