如何创建具备窗口特性、支持手动关闭的tooltip？

原生tooltip和Angular Material的mat-tooltip确实没法直接满足你的需求——它们的核心逻辑是基于hover/focus触发，并且会在失去触发条件时自动关闭，完全不支持"始终打开直到手动关闭"的场景。加上Dialog模态框本身的层级和事件拦截特性，普通tooltip很容易出现异常。

最可靠的方案是自定义一个独立的Tooltip组件，完全控制它的显示/隐藏逻辑，下面是具体的实现步骤（以Angular为例，其他框架思路类似）：

1. 创建自定义持久化Tooltip组件 #

这个组件默认处于显示状态，只有点击右上角的关闭按钮才会隐藏，完全忽略外部点击或输入事件。

组件逻辑（persistent-tooltip.component.ts） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-persistent-tooltip',
  templateUrl: './persistent-tooltip.component.html',
  styleUrls: ['./persistent-tooltip.component.css']
})
export class PersistentTooltipComponent {
  // 接收外部传入的提示内容
  @Input() tooltipContent: string;
  // 可选：关闭后通知父组件
  @Output() closed = new EventEmitter<void>();
  
  // 默认显示
  isVisible = true;

  closeTooltip() {
    this.isVisible = false;
    this.closed.emit();
  }
}

模板（persistent-tooltip.component.html） #

<div class="persistent-tooltip-container" *ngIf="isVisible">
  <button class="tooltip-close-btn" (click)="closeTooltip()">×</button>
  <div class="tooltip-content">
    {{ tooltipContent }}
  </div>
</div>

样式（persistent-tooltip.component.css） #

.persistent-tooltip-container {
  position: absolute;
  background-color: #2d2d2d;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000; /* 必须高于Dialog的层级（通常Dialog是1000-5000） */
  min-width: 180px;
}

.tooltip-close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: #2d2d2d;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tooltip-content {
  margin-top: 2px; /* 避开关闭按钮的位置 */
}

2. 在Dialog模态框中使用组件 #

在你的Dialog内容组件里直接引入这个自定义Tooltip即可，不需要任何触发条件，它会默认显示：

<!-- dialog-content.component.html -->
<div class="dialog-inner-content">
  <h3>表单内容</h3>
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" placeholder="请输入用户名">
  </div>
  
  <!-- 自定义Tooltip，直接放置在需要的位置 -->
  <app-persistent-tooltip 
    tooltipContent="这是一个始终打开的提示，只有点击右上角的×才会关闭，输入或点击其他区域都不会影响它">
  </app-persistent-tooltip>
</div>

关键注意事项 #

• 层级控制：确保Tooltip的z-index高于Dialog的层级，避免被Dialog遮挡。Angular Material Dialog的默认层级是1000，所以设置10000足够安全。
• 事件隔离：关闭按钮的点击事件是组件内部的，不会被Dialog的外部点击拦截逻辑影响（即使Dialog设置了disableClose: false，也不会误关闭Tooltip）。
• 位置调整：如果需要自定义Tooltip的位置，可以给组件添加@Input() position参数，动态修改CSS的top/left/right/bottom属性。

额外优化（可选） #

• 添加打开/关闭的动画效果，比如用Angular的@angular/animations实现淡入淡出。
• 支持重新打开Tooltip的方法，比如给组件添加open()方法，父组件可以调用它重新显示。
• 适配响应式布局，在小屏幕上自动调整Tooltip的位置。

这种自定义组件的方式完全避开了原生和mat-tooltip的固有限制，而且完美适配Dialog环境，之前你遇到的普通Tooltip在Dialog里的异常问题也不会出现。

内容的提问来源于stack exchange，提问作者Antonio Craveiro