Bootstrap tooltip with angularjs using $http to load the content of the tooltip

angularjs, tooltip, twitter-bootstrap

Solution

Ok so calling `.tooltip()` before the AJAX call might seem like a good idea, but the method copies the `data-original-title` or `'title'`into its internal variables so we can't change it :(.

the thing is that calling tooltip() it just listens to onmouseover events. You have to call `.tooltip('show')` to make it appear programmatically.

Here is the working fiddle : http://jsfiddle.net/rB5zT/49/

This is the correct way to do it:

var app =  angular.module("myApp", [])
app.directive('popOver', function($http) {
 return {
  restrict: 'C',
  link: function(scope, element, attr) {
    var i =0;
    element.tooltip();
    $(element).bind('mouseover',function(e) {

        $http.get("test").success(function(){
           attr.$set('originalTitle', "Some text "+i++);  
            element.tooltip('show');
         });
        });
   }
 }
});

Problem

I am running into small issue that I can't seem to figure out. The code below works, except for the first time you hover over the link. Any help is greatly appreciated. http://jsfiddle.net/LpK6d/1/ ``` <div ng-app="myApp"> <a class="pop-over" data-original-title="default value" data-placement="top">test link</a> </div> ``` ``` var app = angular.module("myApp", []); app.directive('popOver', function($http) { return { restrict: 'C', link: function(scope, element, attr) { element.bind('mouseover', function(e) { $http.get("http://ip.jsontest.com/?callback=someFunction") .success(function(data) { attr.$set('originalTitle', data); element.tooltip(); }); }) } } }); ```

Original source