Bootstrap tooltip with angularjs using $http to load the content of the tooltip
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();
});
})
}
}
});
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');
});
});
}
}
});