点击元素或元素消失时，如何取消ngbTooltip的延迟显示？

针对你遇到的问题——触发tooltip的元素在延迟打开前被点击隐藏，但tooltip仍会在延迟结束后显示在屏幕左上角——可以通过手动控制Tooltip实例来取消pending的打开操作，具体实现如下：

步骤1：添加Tooltip模板引用变量 #

修改HTML代码，给带有ngbTooltip的元素添加模板引用变量（比如#tooltip="ngbTooltip"），方便在组件中直接操作Tooltip实例：

<div
  #tooltip="ngbTooltip"
  ngbTooltip="my tooltip"
  container="body"
  placement="left"
  openDelay="1000"
  triggers="hover"
  (click)="doSomething(tooltip)"
>
  click me !
</div>

步骤2：在点击事件中取消Tooltip延迟打开 #

在组件的doSomething方法中，调用Tooltip实例的dismiss()方法——这个方法会直接取消所有pending的打开/关闭操作，包括还未触发的延迟打开请求：

import { Component } from '@angular/core';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  elementVisible = true;

  doSomething(tooltip: NgbTooltip) {
    // 取消Tooltip的延迟打开操作
    tooltip.dismiss();
    // 执行你的业务逻辑，比如隐藏元素
    this.elementVisible = false;
  }
}

如果元素是通过*ngIf控制显示，确保在元素隐藏前调用dismiss()，避免Tooltip失去触发元素后错位显示：

<div
  *ngIf="elementVisible"
  #tooltip="ngbTooltip"
  ngbTooltip="my tooltip"
  container="body"
  placement="left"
  openDelay="1000"
  triggers="hover"
  (click)="doSomething(tooltip)"
>
  click me !
</div>

步骤3：组件销毁时清理Tooltip #

为避免内存泄漏和残留的Tooltip，在组件的ngOnDestroy生命周期钩子中也调用dismiss()：

import { Component, ViewChild } from '@angular/core';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('tooltip') tooltip!: NgbTooltip;
  elementVisible = true;

  doSomething(tooltip: NgbTooltip) {
    tooltip.dismiss();
    this.elementVisible = false;
  }

  ngOnDestroy() {
    if (this.tooltip) {
      this.tooltip.dismiss();
    }
  }
}

问题原因说明 #

出现这个问题的核心是：ngbTooltip的openDelay通过内部定时器实现，当触发元素被移除DOM后，定时器到期时Tooltip无法找到原触发元素的位置，就会默认显示在屏幕左上角。通过手动调用dismiss()，可以提前取消这个定时器，避免Tooltip错误显示。

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