I'm trying to implement a custom tooltip directive with Angular CDK. I would like to make the tooltip stay open. For example, when a tooltip appears, how can I copy its content.

StackBlitz https://stackblitz.com/edit/angular-nms-tooltip?file=src%2Fapp%2Ftooltip%2Ftooltip.component.ts

tooltip.directive.ts

   import {
  ComponentRef,
  Directive,
  ElementRef,
  HostListener,
  Input,
  OnInit,
} from '@angular/core';
import {
  Overlay,
  OverlayPositionBuilder,
  OverlayRef,
} from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

import { TooltipComponent } from './tooltip.component';

@Directive({ selector: '[tooltip]' })
export class TooltipDirective implements OnInit {
  @Input('tooltip') data: string;
  private overlayRef: OverlayRef;

  constructor(
    private overlay: Overlay,
    private overlayPositionBuilder: OverlayPositionBuilder,
    private elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([
        {
          originX: 'center',
          originY: 'top',
          overlayX: 'center',
          overlayY: 'bottom',
          offsetY: -8,
        },
      ]);

    this.overlayRef = this.overlay.create({ positionStrategy });
  }

  @HostListener('mouseenter')
  show() {
    const tooltipRef: ComponentRef<TooltipComponent> = this.overlayRef.attach(
      new ComponentPortal(TooltipComponent)
    );
    tooltipRef.instance.data = this.data;
  }

  @HostListener('mouseout')
  hide() {
    this.overlayRef.detach();
  }
}