Bootstrap 5.3提示框在AngularJS控制器中无法工作，求解决方法

解决办法其实很简单：写个AngularJS自定义指令，把Bootstrap 5.3的Tooltip封装进去，适配AngularJS的DOM更新机制，不管是静态元素还是ng-repeat生成的动态元素都能正常生效。

1. 编写自定义指令 #

angular.module('ToolTipApp', [])
.directive('bsTooltip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // 初始化Bootstrap 5 Tooltip，支持自定义配置
            const tooltip = new bootstrap.Tooltip(element[0], {
                delay: { "show": 1000, "hide": 100 },
                placement: attrs.bsPlacement || 'top',
                title: attrs.bsTitle || ''
            });

            // 页面元素销毁时清理Tooltip，避免内存泄漏
            scope.$on('$destroy', function() {
                tooltip.dispose();
            });
        }
    };
});

2. 在HTML中使用指令 #

静态元素示例 #

<p>Link to <a href="#" bs-tooltip bs-placement="top" bs-title="Hey, it's a tooltip!">The Guardian</a> for tooltip testing.</p>

动态元素（ng-repeat循环）示例 #

<table>
  <tr ng-repeat="x in records">
    <td>
      <h1>{{x}}</h1>
    </td>
    <td>
      <span style="cursor:pointer" class="badge rounded-pill bg-primary" bs-tooltip bs-placement="top" bs-title="Hey, it's a tooltip!">Edit</span>
    </td>
  </tr>
</table>

3. 注意事项 #

• 必须确保项目里已经引入了Bootstrap 5.3的CSS、JS文件，以及它依赖的Popper.js（Bootstrap 5的Tooltip组件离不开Popper）
• 指令命名用bsTooltip是为了避开旧版Bootstrap的同名指令，防止冲突
• 加入$destroy监听，是为了在AngularJS作用域销毁时清理Tooltip，避免内存浪费

内容的提问来源于stack exchange，提问作者dbq-andersons