Bootstrap 5 工具提示在 Angular 11 项目中不起作用答案

【问题标题】：Bootstrap 5 tooltip not working in Angular 11 projectBootstrap 5 工具提示在 Angular 11 项目中不起作用
【发布时间】：2022-02-16 22:30:56
【问题描述】：

我尝试通过以下代码在 Angular 11 项目中使用 Bootstrap 5.0.2：

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>My Project</title>
  <base href="/">
  <meta http-equiv="content-language" content="en-US" />

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

在组件中：

<a class="btn btn-primary"
  data-bs-toggle="tooltip"
  data-bs-html="true"
  data-bs-placement="top"
  [title]="myTitle | toHtmlEntity"
  [href]="myUrl">

  {{ myButtonLabel }}
</a>

没有错误消息，但工具提示不起作用。当鼠标悬停链接时，标题字符串出现。

知道我错过了什么吗？

【问题讨论】：

标签： angular twitter-bootstrap tooltip bootstrap-5

【解决方案1】：

要添加@yatinsingla 的答案，别忘了添加

declare var bootstrap: any

在组件类的顶部，就在导入的下方。

所以你有：

import {} from "....";
....
declare var bootstrap: any;

export class YourComponent implements OnInit, <other interfaces> {       
    ngOnInit(): void {
        // Bootstrap tooltip initialization
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
        })       
    }
}

如果您需要初始化 bootstrap 5 的 popovers，请在 ngOnInit() 函数中添加 javascript initialization code（只需从 bootstrap 的文档中复制），与工具提示相同。

【讨论】：

感谢它对我有用，但我在 angular cli 终端中遇到此错误 >>> 错误 ReferenceError: document is not defined at ExtensionComponent.ngOnInit

【解决方案2】：

尝试在您的 ts 文件中编写此代码：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

来源：https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere

【讨论】：

是否有任何解决方案可以在每次渲染事件后运行此代码一次以在每个组件中正常工作？
我必须检查一下最好的方法！但一种方法可能是创建一个服务并在那里添加代码。并在每个组件中，在构造函数中实例化服务以启用此功能。如果这有意义？
有道理，但听起来仍然不是最佳实践...
由于您使用的是角度项目，您是否尝试过使用ng-bootstrap？我想你不需要任何 javascript/jquery 代码来启用工具提示。它应该开箱即用。

【解决方案3】：

package.json

"@popperjs/core": "^2.10.2",    
"bootstrap": "^5.1.3",

angular.json

 "scripts": [
   "node_modules/@popperjs/core/dist/umd/popper.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js",
 ],

app.service.ts

declare var bootstrap: any;

private tooltipList = new Array<any>();

enableTooltip() {
  // Bootstrap tooltip initialization
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  const tooltipListNewTooltips = tooltipTriggerList.map(tooltipTriggerEl => {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
  this.tooltipList.push(...tooltipListNewTooltips);
}

hideAllTooltips() {
  this.tooltipList;
  for (const tooltip of this.tooltipList) {
    tooltip.dispose();
  }
  this.tooltipList = new Array<any>();
}

【讨论】：

【解决方案4】：

您可以检查您的<button> 或<a> 标签是否在*ngIf 条件内。这发生在我的案例中。示例：

<a *ngIf="conditionVariable" [routerLink]="['/home']" class="btn btn-primary btn-sm">BUTTON</a>

或

<div *ngIf="conditionVariable">
    <a [routerLink]="['/home']" class="btn btn-primary btn-sm">BUTTON</a>
</div>

如果你有这样的情况，你应该用类似的东西替换它：

<a [hidden]="conditionVariable" [routerLink]="['/home']" class="btn btn-primary btn-sm">BUTTON</a>

或

<div [hidden]="ConditionVariable">
    <a [routerLink]="['/home']" class="btn btn-primary btn-sm">BUTTON</a>
</div>

【讨论】：