net*_*djw 5 tooltip twitter-bootstrap angular bootstrap-5
我尝试在 Angular 11 项目中使用 Bootstrap 5.0.2，代码如下：
索引.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>
没有错误消息，但工具提示不起作用。当鼠标悬停在链接上时，标题字符串就会出现。
知道我错过了什么吗？
小智 9
要添加 @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初始化代码（只需从 bootstrap 的文档中复制它），与工具提示相同。