Estoy tratando de implementar una directiva de información sobre herramientas personalizada con Angular CDK. Me gustaría que la información sobre herramientas permanezca abierta. Por ejemplo, cuando aparece una información sobre herramientas, ¿cómo puedo copiar su contenido?

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

tooltip.directiva.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(); } }