如何在Angular中通过Bootstrap CDN使用tooltip且无需npm安装bootstrap

因为你已经通过CDN引入了带Popper的bootstrap.bundle.min.js，无需额外安装npm包，只需按以下步骤初始化tooltip即可：

1. 在使用tooltip的组件TS文件顶部添加全局类型声明，避免TS编译报错

// 放在所有import语句之后，组件类声明之前
declare var bootstrap: any;

2. 在组件的ngAfterViewInit生命周期中初始化所有tooltip

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit, OnDestroy {
  // 存储tooltip实例，用于后续销毁
  private tooltipList: any[] = [];

  ngAfterViewInit(): void {
    // 选中所有设置了data-bs-toggle="tooltip"的DOM元素
    const tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipElements.forEach(el => {
      const tooltipInstance = new bootstrap.Tooltip(el);
      this.tooltipList.push(tooltipInstance);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时释放tooltip实例，避免内存泄漏
    this.tooltipList.forEach(instance => instance.dispose());
  }
}

3. 你的原有HTML元素代码无需修改，注意补充p标签内的可见内容（比如返回按钮、图标、文字等），否则用户无法触发hover/点击事件唤起tooltip：

<p data-bs-toggle="tooltip" data-bs-placement="bottom" title="Back to Previous Page">
  <!-- 补充可见内容示例 -->
  <span>返回上一页</span>
</p>

说明 #

Bootstrap 5的tooltip默认不会自动初始化，必须手动实例化才能生效，你引入的CDN资源已经包含tooltip运行所需的全部依赖，不需要执行npm install bootstrap命令。

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