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
}
})
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.