fbAlbum2.js, bootstrap-tooltip and Magnific-Popup

Question

The tooltip under thumbnails doesn't work. Any ideas why?

tooltip setup

$(document).ready(function(){
  $("[rel=tooltip]").tooltip({
    delay:{show: 300, hide: 150},
    placement: 'bottom'
  });
});

fbAlbum2 setup

$(document).ready(function(){
  $('#fbAlbumI').fbAlbum({
    'albumID':'10150302289698306',
    'rel':'tooltip',
    'callback': function(){ //code that loads after the album must go here
      $(".album a").magnificPopup({type: 'image' }); 
    }
  });
});

http://jsfiddle.net/79RVw/1/

Sorry for the messy css code!

EDIT: When calling the tooltip function in fbAlbum initialization the title of facebook image is not retrieved in popup window of magnific-popup. http://jsfiddle.net/79RVw/4/

Without tooltip it does! http://jsfiddle.net/79RVw/5/

Answer 1

Update with jsfiddle with data-original-title: http://jsfiddle.net/79RVw/7/

'callback': function(){ //code that loads after the album must go here
            doTooltip();
            $(".album a").magnificPopup({type: 'image', image: {titleSrc: "data-original-title"} }); 
}

Answer 2

The tooltip function need to be executed after all images are loaded by fbAlbum, so inside the callback function.

What I did on jsfiddle: http://jsfiddle.net/79RVw/3/ is to create a function doTooltip and then I call doTooltip() inside the callback.

function doTooltip() {
    $("[rel=tooltip]").tooltip({
                delay:{show: 300, hide: 150},
                placement: 'bottom'
    });
}
            $('#fbAlbumI').fbAlbum({
                'albumID':'10150302289698306',
                'rel':'tooltip',
                'callback': function(){ //code that loads after the album must go here
                    doTooltip();
                    $(".album a").magnificPopup({type: 'image' }); 
                }
            });