要实现一个类似于工具提示的覆盖组件，可以使用Angular的指令。

首先，创建一个名为overlay.directive.ts的新指令文件。

overlay.directive.ts：

import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appOverlay]'
})
export class OverlayDirective {
  @Input() overlayText: string;
  overlayElement: HTMLElement;

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.showOverlay();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hideOverlay();
  }

  showOverlay() {
    this.overlayElement = this.renderer.createElement('div');
    const textNode = this.renderer.createText(this.overlayText);

    this.renderer.appendChild(this.overlayElement, textNode);
    this.renderer.addClass(this.overlayElement, 'overlay');
    this.renderer.setStyle(this.overlayElement, 'position', 'absolute');
    this.renderer.setStyle(this.overlayElement, 'top', '0');
    this.renderer.setStyle(this.overlayElement, 'left', '0');
    this.renderer.setStyle(this.overlayElement, 'background-color', 'rgba(0, 0, 0, 0.7)');
    this.renderer.setStyle(this.overlayElement, 'color', '#fff');
    this.renderer.setStyle(this.overlayElement, 'padding', '5px');
    this.renderer.setStyle(this.overlayElement, 'font-size', '14px');
    this.renderer.setStyle(this.overlayElement, 'border-radius', '5px');

    this.renderer.appendChild(this.el.nativeElement, this.overlayElement);
  }

  hideOverlay() {
    this.renderer.removeChild(this.el.nativeElement, this.overlayElement);
  }
}

在上面的代码中，我们创建了一个名为appOverlay的指令。它接受一个名为overlayText的输入属性，用于指定要显示的覆盖文本。当鼠标进入宿主元素时，调用showOverlay()方法来显示覆盖组件。当鼠标离开宿主元素时，调用hideOverlay()方法来隐藏覆盖组件。

接下来，在要使用覆盖组件的组件模板中使用appOverlay指令。

component.html：

鼠标悬停在我上面

在上面的代码中，我们将appOverlay指令应用在一个div元素上，并传递了overlayText属性。

最后，在组件的样式文件中添加以下样式：

component.css：

.overlay {
  display: none;
}

.overlay:hover {
  display: block;
}

以上代码将覆盖组件设置为默认隐藏状态，并在鼠标悬停时显示出来。

这是一个简单的示例，你可以根据需要对覆盖组件进行样式和行为的自定义。