How to use Tippy in Angular for a large number of elements on the screen

I have many (hundreds) of elements on the screen that I want to display a tooltip for. I do not want to have tippy instances for every element instead I want to use only one instance and change its target.

So every time when "mouseOver" is triggered, I run tippy(target, …) for the html-element that triggered the event resulting in a new tippy instance. When the mouse leaves the element I destroy the tippy instance using the "onUntrigger" event.

Since I have "interactive" true, if the mouse leaves the html element only a little bit (less than the interactiveBorder size) and goes back over the element a new tippy instance is created. When we leave the element for good the instance is destroyed but somehow one of the popper-instances is not destroyed. Next time when the mouse goes over that element and the tooltip is shown, I can see in Developer Tools / Elements that there are two DIV elements with data-tippy-root directive.

Is this the right way to use Tippy with a large number of HTML elements?

private tooltipEl: HTMLElement; // a DIV that contains an Angular component that has @Input('data') data: IData    private tippyInstances: Instance[];    public data: IData;      ngAfterViewInit() {      this.tooltipEl = document.querySelector("#tooltip");    }      private instantiateTippy = (target: string) => {      this.tippyInstances = tippy(target, {        content: this.tooltipEl,        theme: "light-border",        arrow: true,        interactive: true,        interactiveBorder: 10,        onUntrigger: this.onUntrigger,      });      private onUntrigger = () => {      this.destroyInstances();    }      private destroyInstances = () => {      this.tippyInstances.forEach(instance => instance.destroy());      this.tippyInstances = undefined;    }      public onMouseOver1 = () => {      this.data = this.dataCollection[1];      this.instantiateTippy("#myButton1");    }      public onMouseOver = () => {      this.data = this.dataCollection[2];      this.instantiateTippy("#myButton2");    }  

https://stackoverflow.com/questions/66609752/how-to-use-tippy-in-angular-for-a-large-number-of-elements-on-the-screen March 13, 2021 at 11:07AM