Initialize bootstrap tooltips after angularJS View has updated

Question

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>

Your app name is different in html and JS? Also are you going to use router in your project? — Subash Selvaraj, Apr 05 '16 at 10:31

score 3 · Accepted Answer · answered Apr 05 '16 at 10:46

3

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 Apr 05 '16 at 10:46

Rajshekar Reddy

18,647
3
40
59

That works thank you, but how do I have to modify the button element to avoid popping up 2 times the tooltip? – d4rty Apr 05 '16 at 10:55
does this solution brings it up two times?? you need to remove your code where you apply the tooltip on document ready.. only this above code is sufficient. if you still have issues then try this `$(this).tooltip('destroy')`. destroy the tooltip and then again apply it.. – Rajshekar Reddy Apr 05 '16 at 11:04
@d4rty if this solution fixed your issue please mark it as answer. – Rajshekar Reddy Apr 05 '16 at 11:07
1

Now everything works, I first put your code inside `$(document).ready(...`. Thank you! – d4rty Apr 05 '16 at 11:08
@d4rty glad it helped you – Rajshekar Reddy Apr 05 '16 at 11:15

score 1 · Answer 2 · answered Apr 05 '16 at 10:36

1

If you are using ngRoute in your project you can put the below code in your controller.

$scope.$on('$viewContentLoaded', function(event){
    console.log('content loaded!')
  });

Otherwise wrap your code inside $timeout,

var app = angular.module('testApp', []);
  app.controller('testController', function($scope, $timeout) {
    $timeout(function(){
        $scope.data= "hello";
    });
  });

answered Apr 05 '16 at 10:36

Subash Selvaraj

3,385
1
14
17

where exactly do I have to put the ngRoute code in the controller? – d4rty Apr 05 '16 at 10:46

Initialize bootstrap tooltips after angularJS View has updated

2 Answers2