当用户在外部单击时，如何让一个样式为工具提示的<div>从Angular应用程序中消失？

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  template: `
    <div [hidden]="!showTooltip" (click)="onClickOutside($event)">
      <!-- 工具提示内容 -->
    </div>
    <button (click)="toggleTooltip()">显示/隐藏工具提示</button>
  `,
})
export class TooltipComponent {
  showTooltip = false;

  @HostListener('document:click', ['$event'])
  onClickOutside(event: MouseEvent) {
    const clickedElement = event.target as HTMLElement;
    const tooltipElement = document.querySelector('div[app-tooltip]') as HTMLElement;

    if (tooltipElement && !tooltipElement.contains(clickedElement)) {
      this.showTooltip = false;
    }
  }

  toggleTooltip() {
    this.showTooltip = !this.showTooltip;
  }
}