0

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

因此,每次触发“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");
  }
4

0 回答 0