Issue
If I may borrow some talk-radio vernacular, "Long time listener; first time caller."
I have been trying for a few days to add some tooltips to my site and really like the look and feel of the Bootstrap 5.3 ones. However, I can not get them to work inside my AngularJS controllers. I did find how to add tooltips with straight AngularJS and/or CSS, but the looks of the results let me underwhelmed compared to the options in Bootstrap 5.3
I can get the Bootstrap 5.3 tooltips to work on a plan HTML page with this code:
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.
See this Fiddle.
I poked around on the web and found how to add tooltips with 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>
See this Fiddle.
While it does the job, I'd like to use the Bootstrap 5.3 ones if possible.
However, when I try to marry these two together and use the Bootstrap 5.3 tooltips in my AngularJS controller, they don't work.
This is one of my attempts in this Fiddle.
Does anyone know of a way to do this? To use the Bootstrap 5.3 tooltips inside AngularJS controllers?
Solution
For Bootstrap 5.3, tooltips are initiated by passing the element, so you can pass the element in each directive (you can use data-bs-* attributes, or pass them in options object):
link: function(scope, element, attrs) {
new bootstrap.Tooltip(element[0], {delay: {"show": 1000, "hide": 100 } });
}
demo:
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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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-bs-toggle="tooltip" data-bs-placement="top" title="Hey, it's a tooltip!" tooltip>Edit</span></td>
</tr>
</table>
</body>
</html>Answered By - traynor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.