请允许我借用一些电台谈话白话，“长期听众；第一次来电。”
几天来我一直在尝试向我的网站添加一些工具提示，并且非常喜欢 Bootstrap 5.3 的外观和感觉。但是，我无法让它们在我的 AngularJS 控制器中工作。我确实找到了如何使用直接 AngularJS 和/或 CSS 添加工具提示，但与 Bootstrap 5.3 中的选项相比，结果的外观让我感到不知所措
我可以使用以下代码获取 Bootstrap 5.3 工具提示以在计划 HTML 页面上工作：
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl,{delay: { "show": 1000, "hide": 100 }}))
<p>Link to <a href="https://www.theguardian.com/us" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Hey, it's a tooltip!">The Guardian</a> for tooltip testing.
参见这个小提琴。
我在网上查了一下，发现了如何使用 AngularJS 添加工具提示。
ToolTipApp.directive('tooltip', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
$(element).hover(function(){
// on mouseenter
$(element).tooltip('show');
}, function(){
// on mouseleave
$(element).tooltip('hide');
});
}
};
});
<tr ng-repeat="x in records">
<td>
<h1>{{x}}</h1>
</td>
<td><span style="cursor:pointer" class="badge rounded-pill bg-primary" data-toggle="tooltip" data-placement="top" title="Hey, it's a tooltip!" tooltip>Edit</span></td>
</tr>
参见这个小提琴。
虽然它可以完成这项工作，但如果可能的话，我想使用 Bootstrap 5.3。
但是，当我尝试将这两者结合在一起并在我的 AngularJS 控制器中使用 Bootstrap 5.3 工具提示时，它们不起作用。
这是我在 this Fiddle 中的尝试之一。
有谁知道有什么方法可以做到这一点吗？要在 AngularJS 控制器中使用 Bootstrap 5.3 工具提示？
对于 Bootstrap 5.3，工具提示是通过传递元素来启动的，因此您可以在每个指令中传递元素：
link: function(scope, element, attrs) {
new bootstrap.Tooltip(element[0], {delay: {"show": 1000, "hide": 100 } });
}
演示：
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Photo One",
"Photo Two",
"Photo Three",
"Photo Four",
]
});
// ToolTipApp is the ng-app application in your web app
app.directive('tooltip', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
new bootstrap.Tooltip(element[0], {delay: {"show": 1000, "hide": 100 } });
}
};
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in records">
<td>
<h1>{{x}}</h1>
</td>
<td><span style="cursor:pointer" class="badge rounded-pill bg-primary" data-toggle="tooltip" data-placement="top" title="Hey, it's a tooltip!" tooltip>Edit</span></td>
</tr>
</table>
</body>
</html>