Issue
I created an simple AngularJS application, the problem is, that whenever my view will automatically be updated due to changes in the model (which are not shown in the example below), the tooltip doesn't look like an bootstrap tooltip anymore.
I found this answer satckoverflow but I don't know how to apply this solution. Maybe someone can show me the approach from the provided link at MWE below.
<div class="container" ng-app="testApp" ng-controller="testController">
<h3>Data from Scope: {{data}}</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<button type="button" ng-click="refresh()">refresh data</button>
</div>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.data= 123;
$scope.refresh = function () {
$scope.data= Math.random();
}
});
</script>
Solution
Use this dynamic working code.
$(document).on('mouseover','[data-toggle="tooltip"]',function(){
$(this).tooltip('show');
});
Idea is when ever you hover your mouse on the elements which has [data-toggle="tooltip"]
attribute set on them, the tooltip is shown. This works for all the elements (static and dynamic)
Answered By - Rajshekar Reddy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.