I'm creating and the fly with ComponentFactory a Component which I use as an Tooltip on yFiles (the fantastic HTML diagramming from yWorks).
I can't get the Tooltips to show and when the Tooltip closes it leaves artifacts.
Anyone got some advice?
this.component = this.factory.create(this.injector);
this.component.instance.entity = entitySingle;
this.component.location.nativeElement.class = 'single-entity-card';
this.component.changeDetectorRef.detectChanges();
this.component.onDestroy(() => {
// console.log('destroy');
super.ngOnDestroy();
this.graphComponent.invalidate();
});
tooltip.appendChild(this.component.location.nativeElement);
I found a workaround for hiding the artifacts.
When creating the tooltip with yFiles on editMode.addQueryItemToolTipListener it gets rendered in the body of the page (see screenpicture below). The Angular component then renders the tooltip (of the tooltip) in the cdk-overlay-container (second screenpicture below), but the Angular tooltip stays empty and doesn't get cleaned up after the yFiles tooltip closes.
My workaround for now is to hide the Angular tooltips through CSS:
::ng-deep {
body .cdk-overlay-container {
.mat-tooltip-panel {
visibility: hidden;
}
}
}
I would love it if I can get the Angular tooltip to work on the yFiles tooltip, but this will suffice for now.
