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/

score 1 · Answer 1 · answered Mar 19 '14 at 04:48

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

Yes you are right. At first, create tootip function, then call it during callback. One more thing, though. When using this method the magnific-popup doesn't retrieve the title of facebook image in the popup. See my edited question. — fat_mike, Mar 19 '14 at 14:36
tooltip remove the 'title' attribute from the tag . and create a data-original-title="" attribute. — progysm, Mar 19 '14 at 14:46

score 1 · Accepted Answer · answered Mar 19 '14 at 14:48

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

fbAlbum2.js, bootstrap-tooltip and Magnific-Popup

2 Answers2