Change Bootstrap Tooltip Content Dynamically

Dynamic Bootstrap Tooltip

I was working on an angular application. There I got a requirement to show bootstrap tooltip whose content(title) change dynamically. Following is the way I generally use to show the bootstrap tooltip:

<a href="#" data-toggle="tooltip" title="Default">Hover Over Me</a>

<script type="text/javascript">
  $(function(){
    $('a[data-toggle="tooltip"]').tooltip();
  });
</script>

Above approach works fine. So I use this approach with dynamic data as

<div ng-app='MyModule' ng-controller="MyController" style="margin: 20px">
    <input ng-model="myData" />{{myData}}
    <br/><br/> <a data-toggle="tooltip" title="{{myData}}">Hover Over Me</a>
</div>

<script type="text/javascript">
  $(function(){
    $('a[data-toggle="tooltip"]').tooltip();
  });

  var app = angular.module('MyModule', []);

  app.controller('MyController', function ($scope) {
    $scope.myData = "Default";
  });
</script>

but this is not working. Each time “Default” is shown in the tooltip even if I change the angular variable data.

Demo

Solution of this issue is quite simple just replace “title” with “data-original-title” and code runs fine:

<div ng-app='MyModule' ng-controller="MyController" style="margin: 20px">
    <input ng-model="myData" />{{myData}}
    <br/><br/> <a data-toggle="tooltip" data-original-title="{{myData}}">Hover Over Me</a>
</div>

Demo

At the time of DOM loading the two chunks of codes (initializing the tooltip and angular stuff) runs independently and separately which can cause race condition in a complex scenario. In that case you can use the following code:

<div ng-app='MyModule' ng-controller="MyController" style="margin: 20px">
    <input ng-model="myData" />{{myData}}
    <br/><br/> <a data-toggle="tooltip" data-original-title="{{myData}}">Hover Over Me</a>
</div>

<script type="text/javascript">
  var app = angular.module('MyModule', []);

  app.controller('MyController', function ($scope) {
    $('a[data-toggle="tooltip"]').tooltip();
    $scope.myData = "Default";
  });
</script>

Demo

Hope this helps 🙂 .