angular - 如何在 Angular 中使用 Tippy 处理屏幕上的大量元素

Question

我想在屏幕上显示许多（数百个）元素的工具提示。我不想为每个元素都有一个小实例，而是我只想使用一个实例并更改它的目标。

因此，每次触发“mouseOver”时，我都会为触发事件的 html 元素运行tippy(target, ...)，从而生成一个新的tippy 实例。当鼠标离开元素时，我使用“onUntrigger”事件销毁tippy实例。

因为我有“交互式”，如果鼠标只离开 html 元素一点点（小于 interactiveBorder 大小）并返回到元素上，则会创建一个新的tippy 实例。当我们永远离开元素时，实例被销毁，但不知何故其中一个 popper-instances 没有被销毁。下次当鼠标移过该元素并显示工具提示时，我可以在开发人员工具/元素中看到有两个带有 data-tippy-root 指令的 DIV 元素。

这是将 Tippy 与大量 HTML 元素一起使用的正确方法吗？

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");
  }

标签： angulartippyjs