Tooltip artifacts using Angular ComponentFactory

Question

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

Image of the Tooltip artificats

Artifacts marked with red circles

Answer 1

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.

screenpicture of tooltip html

screenpicture of the Angular artifacts html

Answer 2

This is just a wild-guess. Try putting your element inside a new "div" and clear all the div's children in onDestroy just to be "sure".

If you show us the DOM that shows the artefacts and maybe provide more details about how these artifacts are created, we might be able to provide better help.