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

Question

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();                  
              });
            })
        }
    }
});

Does it need to load on each mouseover? Would this work: jsfiddle.net/ZsMY4 ? — jkoreska
– jkoreska, Commented May 21, 2013 at 2:18
@jkoreska It does need to load on every mouseover, because I use the data for the tooltip. — anazimok
– anazimok, Commented May 21, 2013 at 16:38
Ok, you might consider caching it at least. How's this: jsfiddle.net/ZsMY4/1 ? — jkoreska
– jkoreska, Commented May 21, 2013 at 18:18

victor · Accepted Answer · 2014-04-26 09:20:33Z

4

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');
         });
        });
   }
 }
});

edited Apr 26, 2014 at 9:20

answered May 24, 2013 at 7:51

victor

1,6961 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

anazimok Over a year ago

the problem is that first time you hover over the tooltip, it displays default text. My goal was to load the content via xhr every time someone hover over the link.

victor Over a year ago

OK, here is the way to do it. Might seem like a work-around, but you do have to do a http request to get the actual value of the tooltip. Hope it helps

victor Over a year ago

This is the working version. You have to call tooltip('show') on ajax response :).

victor Over a year ago

@Shriram, thanks for pointing out the bug. The fiddle URLs for getting bootstrap js and css were not working anymore. They were redirecting to getboostrap.com.

kiev Over a year ago

Don't forget fixTitle... otherwise it won't work. $(element).bind('mouseover', function (e) { element.attr('title', element.title).tooltip('fixTitle').tooltip('show'); });

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related