如何阻止ngbTooltip点击后消失？实现复制按钮tooltip切换需求

问题核心是点击按钮时，默认的hover/focus触发逻辑会导致tooltip关闭，即使更新了提示文本也不会自动重新显示。可以通过手动控制tooltip的显示状态来解决：

步骤1：获取Tooltip实例 #

在模板中给按钮添加模板引用变量，用于在组件类中获取NgbTooltip实例：

<button type="button" 
        (click)="copy()" 
        [ngbTooltip]="tooltipText" 
        triggers="hover focus"
        #tooltip="ngbTooltip">
  复制
</button>

步骤2：修改组件类逻辑 #

引入NgbTooltip并通过@ViewChild获取实例，在复制方法中更新提示文本后，手动控制tooltip保持显示：

import { Clipboard } from '@angular/cdk/clipboard';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { ViewChild } from '@angular/core';

@Component({
  ...
})
export class CopyButtonComponent {
  tooltipText = 'Copy';
  @ViewChild('tooltip') tooltip!: NgbTooltip;

  constructor(private clipboard: Clipboard) {}

  copy(): void {
    this.clipboard.copy('text');
    this.tooltipText = 'Copied!';
    
    // 如果tooltip已关闭，手动打开它
    if (!this.tooltip.isOpen()) {
      this.tooltip.open();
    }

    // 可选：2秒后恢复原提示并关闭tooltip
    setTimeout(() => {
      this.tooltipText = 'Copy';
      this.tooltip.close();
    }, 2000);
  }
}

补充说明 #

• 手动调用tooltip.open()可以强制tooltip显示，不受默认hover/focus触发逻辑的影响
• 加入延迟恢复的逻辑是为了提升用户体验，避免提示一直停留在"Copied!"状态
• 如果不需要自动恢复，只需移除setTimeout部分即可，此时提示会保持到鼠标离开按钮

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