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

问题描述

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

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

因为我有“interactive”true，如果鼠标只离开html元素一点点（小于interactiveBorder大小）并返回到元素上，则会创建一个新的tippy实例。当我们永远离开元素时，实例会被销毁，但不知何故，其中一个 popper-instance 没有被销毁。下次当鼠标移到该元素上并显示工具提示时，我可以在开发人员工具/元素中看到有两个带有 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");
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）