如何通过JavaScript手动触发ngx-bootstrap Tooltip并获取实例？

先澄清一个关键误解：bs-tooltip不是DOM元素的ID，它是ngx-bootstrap Tooltip指令的导出别名——你在模板里写#customTooltip="bs-tooltip"，其实是把Tooltip指令的实例绑定到customTooltip这个模板引用变量上，和DOM元素的ID完全没关系，这就是你用document.getElementById("bs-tooltip")返回null的原因。

为什么直接用JS拿不到Tooltip实例？ #

ngx-bootstrap的Tooltip是Angular指令，它的实例由Angular的依赖注入系统管理，不会直接暴露在DOM元素上。而且默认情况下，Tooltip的弹窗元素是动态创建的（只有触发时才生成），它的ID是自动生成的（比如tooltip-123这种格式），也不是bs-tooltip。

从纯JavaScript手动调用show()的两种方法 #

方法1：在Angular组件中暴露方法，让JS调用

这是最规范的做法，避免直接操作Angular内部API：

1. 在你的组件类里，通过@ViewChild获取Tooltip实例：

import { Component, ViewChild } from '@angular/core';
import { TooltipDirective } from 'ngx-bootstrap/tooltip';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('customTooltip') customTooltip!: TooltipDirective;

  // 暴露给外部JS调用的方法
  showTooltip() {
    this.customTooltip.show();
  }

  hideTooltip() {
    this.customTooltip.hide();
  }
}

2. 在模板里，把组件实例挂到window上（或者给组件根元素加ID）：

<div id="tooltip-host">
  <span tooltip="Hello there! I was triggered manually" triggers="" #customTooltip="bs-tooltip">
    This text has attached tooltip
  </span>
  <!-- 原有的控制按钮 -->
  <button type="button" class="btn btn-success" (click)="customTooltip.show()"> Show </button>
  <button type="button" class="btn btn-warning" (click)="customTooltip.hide()"> Hide </button>
  <button type="button" class="btn btn-info" (click)="customTooltip.toggle()"> Toggle </button>
</div>

3. 在组件的ngOnInit钩子中把实例挂到全局：

ngOnInit() {
  window['tooltipComponent'] = this;
}

4. 现在就能在纯JS里直接调用：

window.tooltipComponent.showTooltip();
// 或者隐藏
window.tooltipComponent.hideTooltip();

方法2：直接把Tooltip实例绑定到DOM元素上

如果你不想额外写组件方法，可以在模板里把customTooltip绑定到span元素的自定义属性上：

<span 
  tooltip="Hello there! I was triggered manually" 
  triggers="" 
  #customTooltip="bs-tooltip"
  [attr.data-tooltip-ref]="customTooltip"
>
  This text has attached tooltip
</span>

然后在纯JS里获取并调用：

const tooltipSpan = document.querySelector('[tooltip]');
const tooltipInstance = tooltipSpan['data-tooltip-ref'];
tooltipInstance.show();
// 调用hide或toggle同理
tooltipInstance.hide();

注意事项 #

• 不要依赖自动生成的Tooltip弹窗元素ID，因为每次刷新页面ID都会变化，而且弹窗只有在显示时才存在于DOM中。
• 生产环境尽量避免使用Angular的调试API（比如ng.probe），因为生产构建会移除这类调试相关代码，导致方法失效。

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