如何解决如何在 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 举报,一经查实,本站将立刻删除。