angular、服务/指令的工具提示

import { Injectable, ElementRef, Renderer2 } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TooltipService {
  private tooltipElement: HTMLElement;

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

  showTooltip(tooltipText: string): void {
    if (!this.tooltipElement) {
      this.tooltipElement = this.renderer.createElement('div');
      this.renderer.addClass(this.tooltipElement, 'tooltip');
      document.body.appendChild(this.tooltipElement);
    }
    this.renderer.setProperty(this.tooltipElement, 'textContent', tooltipText);
    this.renderer.setStyle(this.tooltipElement, 'display', 'block');
    this.setPosition();
  }

  hideTooltip(): void {
    if (this.tooltipElement) {
      this.renderer.setStyle(this.tooltipElement, 'display', 'none');
    }
  }

  private setPosition(): void {
    const rect = this.el.nativeElement.getBoundingClientRect();
    this.renderer.setStyle(this.tooltipElement, 'left', `${rect.left + window.scrollX}px`);
    this.renderer.setStyle(this.tooltipElement, 'top', `${rect.bottom + window.scrollY}px`);
  }
}

import { Directive, HostListener, Input } from '@angular/core';
import { TooltipService } from './tooltip.service';

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @Input('appTooltip') tooltipText: string;

  constructor(private tooltipService: TooltipService) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.tooltipService.showTooltip(this.tooltipText);
  }

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TooltipService } from './tooltip.service';
import { TooltipDirective } from './tooltip.directive';

@NgModule({
  declarations: [
    AppComponent,
    TooltipDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [TooltipService],
  bootstrap: [AppComponent]
})
export class AppModule { }

<button appTooltip="This is a tooltip">Hover me</button>

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
}