Angular - How can I remove all other existing directives?

I'm using a tooltip directive , so when I click a <button> - I dynamically inject and display a tooltip.

It does work well and I do see the tooltips :

This is the code I've used to inject a tooltip when clicking a button :

@Directive({ selector: '[popover]'})
class Popover {
  private _component: ComponentRef<>;
    constructor(private _vcRef: ViewContainerRef, private _cfResolver: ComponentFactoryResolver,private elementRef: ElementRef) {
    }
    @HostListener('click')
  toggle() {
    if (!this._component) {
      const componentFactory = this._cfResolver.resolveComponentFactory(PopoverWindow);
      this._component = this._vcRef.createComponent(componentFactory);

    } else {
      this._vcRef.clear()
      this._component.destroy();
      this._component = null;
    }
  }
} 

But I don't want more than one tooltip to appear in the screen.
In other words , before I inject a tooltip - I want to remove all existing tooltips - if any.

Question:

How can I "find" all existing tooltips and remove them before I insert a new one ?

I know that I can add a class to each one and then remove them via removeNode but I want to do it in the Angular way.

Full Plunker

BTW - I'll be happy to find a general solution also for components and not only for directives. ( If possible).