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

Question

我尝试在 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>

没有错误消息，但工具提示不起作用。当鼠标悬停在 link.

时出现标题字符串

知道我错过了什么吗？

Answer 1

尝试在您的 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

Answer 2

要添加@yatinsingla 的回答，请不要忘记添加

declare var bootstrap: any

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

所以你有：

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)
        })       
    }
}

如果您需要在 ngOnInit() 函数中初始化 bootstrap 5 的 popovers, add the javascript initialization code（只需从 bootstrap 的文档中复制它）至于工具提示。

Answer 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>();
}

Answer 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>

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

Bootstrap 5 tooltip not working in Angular 11 project

tooltip

twitter-bootstrap

angular

bootstrap-5