激活Bootstrap Tooltip后Dropdown失效，寻求替代激活方案

你当前通过全局批量初始化Tooltip的方式，可能因为误选中了Dropdown组件内的元素（比如带data-bs-toggle="tooltip"的下拉按钮），导致Bootstrap的Tooltip与Dropdown事件冲突，进而引发Dropdown失效。以下是几种更安全的Tooltip激活方式：

1. 用Angular自定义指令封装Tooltip（推荐） #

创建专属指令，仅对带有data-bs-toggle="tooltip"的元素单独初始化Tooltip，精准控制作用范围，避免干扰其他组件：

import { Directive, ElementRef, OnInit } from '@angular/core';
import bootstrap from 'bootstrap';

@Directive({
  selector: '[data-bs-toggle="tooltip"]'
})
export class TooltipDirective implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    new bootstrap.Tooltip(this.el.nativeElement);
  }
}

在Angular模块中声明该指令后，只需在需要Tooltip的元素上添加data-bs-toggle="tooltip"和title属性即可，无需手动批量处理。

2. 缩小选择器范围，排除Dropdown元素 #

如果不想新增指令，可以调整选择器，明确排除Dropdown相关元素，避免误初始化：

private elementRef: ElementRef = inject(ElementRef);

ngAfterViewInit(): void {
  // 只初始化非Dropdown触发按钮的Tooltip元素
  const tooltipTriggerList = this.elementRef.nativeElement.querySelectorAll('[data-bs-toggle="tooltip"]:not(.dropdown-toggle)');
  [...tooltipTriggerList].forEach(el => new bootstrap.Tooltip(el));
}

3. 利用Bootstrap自动初始化方法 #

Bootstrap提供了全局自动初始化所有组件的方法，可一次性完成Tooltip和Dropdown的正确初始化：

ngAfterViewInit(): void {
  // 先清理可能存在的重复实例
  bootstrap.Tooltip.dispose();
  // 自动初始化所有Bootstrap组件（包括Tooltip、Dropdown等）
  bootstrap.initialize();
}

注意：这种方式会初始化所有Bootstrap组件，若项目中有自定义组件存在冲突，需谨慎使用。

另外，建议检查你的Dropdown触发元素是否意外添加了data-bs-toggle="tooltip"属性，若有则移除该属性，也能直接解决冲突问题。

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