current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 7 down vote favorite
2

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

});

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

1 Answer 1

up vote 2 down vote accepted

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');
         });
        });
   }
 }
});
share|improve this answer
    
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. –  anazimok May 25 '13 at 15:00
    
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 May 25 '13 at 18:04
    
This is the working version. You have to call tooltip('show') on ajax response :). –  victor May 25 '13 at 20:11
    
@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. –  victor Apr 26 '14 at 9:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.