"fbAlbum2.js, Bootstrap-tooltip, and Magnific-Popup are three essential tools for

Help needed with fixing the tooltip issue under thumbnails.

Here is the setup for the tooltip:

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

Now, let's look at the fbAlbum2 setup:

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

Check out this link for more information.

We apologize for any inconvenience caused by the messy css code.

EDIT: An issue arises when utilizing the tooltip function in the fbAlbum initialization. The title of the Facebook image does not show up in the popup window of magnific-popup. For reference, visit this link.

On the other hand, everything works fine without the tooltip feature! Visit this link to see it in action.

javascriptmagnific-popuptwitter-bootstrap-tooltip

Answer №1

Check out the updated version on jsfiddle with data-original-title: http://jsfiddle.net/79RVw/7/

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

Answer №2

In order for the tooltip function to work properly, it should be executed once all images are loaded by fbAlbum, within the callback function.

On jsfiddle, I created a function called doTooltip and then invoked it inside the callback function like this: http://jsfiddle.net/79RVw/3/

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: Prop type error encountered - The prop 'open' must be defined in Snackbar component

Recently, I've been implementing jest snapshot tests into my application. The main focus is on the LoginForm component. render() { return ( ... <DynamicSnack dialogOpen={this.props.dialogOpen} snackOpen={this.props.sna ...

javascriptreactjsunit-testingmaterial-uijestjs

A three-argument function designed for generating a prepend element

Hey everyone, this is my first time asking a question on this platform, so bear with me if I sound a bit off. I'm currently diving into the world of Javascript and I recently attempted to create a function with 3 arguments: the parent element, the ele ...

javascripthtmldom

Learn how to incorporate latitude and longitude coding into PHP to display a map icon that correctly redirects to the desired URL when clicked

I am in need of a table that includes buttons for adding, editing, deleting, and mapping. Everything works fine so far, but when I click on the map button, it should take me to Google Maps with coordinates linked from a MySQL database containing latitude ...

javascriptphpmysqlgoogle-maps

Firebase: Saving data to a nonexistent object

I am currently facing a challenge in saving the result of a serviceId to a services object within a parent entity named provider1, especially since the services object has not been initialized yet. The structure of my Firebase data is as follows: "provid ...

javascriptangularjsfirebaseangularfire

An issue arises when attempting to utilize URL parameters within a loader

In my React project, I am utilizing React-Router. The code for my movie page is as follows: import React from "react"; import axios from 'axios' export async function loader({ params }) { const movieId = params.movieId; const mov ...

javascriptreactjsreact-routerreact-router-dom

Can you explain the distinctions among 'data:', 'data: ()', and 'data()' when working with Vue.js?

While exploring the Vue.js documentation, I came across two ways to define data: data: {} and data() { return; }. data: { defaultLayout: 'default' } data() { return { defaultLayout: 'default' } } However, there is ...

javascriptvue.jsvuejs2

Emphasize the center row within a moving table

I am interested in developing a scrolling table where only 10 rows are visible at any given time, with the middle row set to stand out even during scrolling. The concept is that as the user scrolls down, the highlighted row changes progressively as they c ...

javascripthtmlcss

The Mongoose framework captures and stores all input parameters from the request body

Currently in the process of setting up a small API, I am handling data validation on the client side of my application. As I go through this process, I am also organizing my data to align with my mongoose schema. My current attempt involves... router.rou ...

javascriptnode.jsmongodbexpressmongoose

The <Button> element is incompatible with popups. (HTML, CSS, JS)

I've been struggling with this issue. I used CSS color values to create a smiley face, but when I added a button it messed up the design (adding an unwanted circle around the center of the smiley). I attempted to synchronize the button tag with the po ...

javascripthtmlcss

Form validation errors were detected

Currently, I am working with a formgroup that contains input fields with validations set up in the following manner: <mat-form-field class="mat-width-98" appearance="outline"> <mat-label>Profession Oc ...

javascriptangulartypescriptforms

I encountered a problem with a three.js video example not functioning properly on my iPhone 6s, displaying only a black screen

An instance of a three.js video example not functioning on an iPhone 6s, only displaying a black panel. Interestingly, this example works perfectly on a PC desktop browser, but fails to load in Safari and Chrome on the iPhone 6s. ...

javascriptiosthree.jswebgl

Avoid commencing an EmberJs application with static assets already in place

Is there a way to obtain the minified EmberJs JavaScript and CSS assets without automatically initializing the EmberJs App? The scenario is having a login.html where users can log in, but with the static assets preloaded to eliminate waiting time once red ...

javascriptdjangoember.jsdjango-templates

Exploring the Concept of Sending Data via AJAX Request

Trying to comprehend the intricacies of the HTTP POST request transmitted through jQuery's .ajax() or .post() functions. I'm puzzled by the presence of a 'datatype' parameter for server-sent data. What exactly will be included in the r ...

javascriptjqueryajax

Tips on how to update a table following each button click during an ajax request

I am encountering an issue while trying to display data in a table by clicking on a search button. The problem arises when there is no data between the specified "Fromdate - Todate" range; the error message appears correctly. However, even after entering t ...

javascriptjqueryjsonajax

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...

javascriptpythonshellmongodb

How can I check and add contacts on Telegram?

Assistance needed: I have 40,000 mobile numbers and I need to perform the following tasks: Verify if these numbers have a Telegram account Add these accounts to the contact list Can anyone provide advice on how to accomplish this? Perhaps with examples o ...

javascriptpythontelegram

Managing events inside a JQuery dialog box

Currently, I have successfully implemented a JQuery dialog that allows users to change their password. The functionality works smoothly as the system checks if the two passwords match and if the new password meets the minimum requirements before making an ...

javascriptjqueryeventsdialogkeyup

During the animation sequence, the element is seen ascending

I'm encountering a small issue with one of the elements I'm animating - it's moving up slightly during the animation process. It elevates about 2-3 pixels while the animation is playing, then snaps back down once it's completed. The el ...

javascriptjqueryhtmlcssanimation

Received the item back from the database query

When I run the code below; var results = await Promise.all([ database.query("SELECT COUNT(amount) FROM transactions WHERE date >= now() - INTERVAL 1 DAY;"), database.query("SELECT COUNT(amount) FROM transactions WHERE date >= now() - INTER ...

javascriptmysqlnode.jsasynchronouspromise

How can I display a badge in my app when it is running using React Native?

For the past week, I've been dealing with an issue. My question is how can I display a new message badge without having to click on the message room when running my app. The badge should only show up after clicking on the message room. I see the badg ...

javascriptreactjsreact-native