create angular component tooltip programmatically

Question

I should show a tooltip when I hover an svg element.

I would like that the tooltip is an angular component for easier UI creating.

the constraint is that the svg element is created programmatically so I don't know how to create the template referencer for dynamic component rendering.

My question is how can I build an angular component as a tooltip of a dynamic svg element ?

Here's a sample on stackblitz. I wrote the code of the dynamic component. now I should render it dynamically when hovering the circle.

@ViewChild('cont', { static:true,read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) { }
@ViewChild('svg', { static: true }) svg: ElementRef

ngAfterViewInit() {
  let circle= document.createElementNS('http://www.w3.org/2000/svg','circle')
  circle.setAttribute('r','40');
  circle.setAttribute('cx','50');
  circle.setAttribute('cy','50');
  //let cont= document.createAttributeNS('http://www.w3.org/2000/svg','#cont')
  //circle.setAttribute('#cont','test')
  this.svg.nativeElement.appendChild(circle)
  this.entry.clear();
  const factory = this.resolver.resolveComponentFactory(TooltipComponent);
  const componentRef = this.entry.createComponent(factory);

}

observingstream observingstream · Accepted Answer · 2019-09-27T15:57:35

You can add it either through creating a custom component or by using a tooltip directly on the SVG. Either way, you will want to watch the mouseover and mouseout events of either the SVG or the circle element directly by using RxJS.

You can see an example of this in this forked stackblitz.

https://stackblitz.com/edit/angular-9vgjjl-7qmneg?file=app%2Ftooltip-overview-example.ts

create angular component tooltip programmatically

1 Answers