Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for sharing Guenni007, I see this working on your site, but on my site, it was opening the overlay but not the image, but I didn’t get any error messages.
But thanks to you I was able to use some of your code to adjust mine and get it working to use the hotspot tooltip as the lightbox title.

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#top.page-id-1386 .av-image-hotspot_inner').each(function () {
   	var toolTip = $(this).closest('.av-image-hotspot').attr('data-avia-tooltip');
        var cleanTitle =  $(toolTip).text();
   $(this).attr('title', cleanTitle );
$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);
});
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

In the above code you’ll see that I added window.addEventListener('DOMContentLoaded', function() { }); this is because on my test site I’m loading the scripts in the header before jQuery, I included it here should someone in the future be loading jQuery in the footer.
I also added a page ID so it will only work on my test page.
I also wanted to remove the tags from the titles so I added another variable var cleanTitle = $(toolTip).text();

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear this helps, try changing the css:

.avia-team-member .team-member-description {
	visibility:hidden;
}

to:

.avia-team-member .team-member-description {
	display: none;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Yes, I didn’t know what title he would want for each image and I wanted a different title for each image when I tested so that I knew it was working correctly.
I had thought of getting the tooltip text (data-avia-tooltip) and adding it to the lightbox title, but he is not using the tooltip field so “data-avia-tooltip” was empty.
I believe getting each hotspot tooltip and adding it to the lightbox title should be something like this:

(function($){
   $('.av-image-hotspot a').each(function () {
   	var toolTip = $(this).parents('div').eq(1).find('.av-image-hotspot').attr('data-avia-tooltip');
   $(this).attr('title', toolTip );
$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);

but it’s not working quite as expected, do you have any ideas? Thanks Guenni007

Best regards,
Mike

Hi,
Thanks for the link to your site, when I check your icon it is blue & white on mouse-over, if you want it blue before mouse-over try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #header_meta .av-social-link-facebook a {
    color: #37589b;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, your approach seems fine, another way would be to add the page ID to the title attribute lines like this:

function custom_hotspot_title_script() { ?>
  <script>
(function($){
$('#top.page-id-1 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-1 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-1 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-1 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-1 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-1 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-1 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-1 .av-image-hotspot-8 a').attr('title','hotspot-8');

$('#top.page-id-2 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-2 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-2 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-2 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-2 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-2 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-2 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-2 .av-image-hotspot-8 a').attr('title','hotspot-8');
$('#top.page-id-2 .av-image-hotspot-9 a').attr('title','hotspot-9');
$('#top.page-id-2 .av-image-hotspot-10 a').attr('title','hotspot-10');
$('#top.page-id-2 .av-image-hotspot-11 a').attr('title','hotspot-11');
$('#top.page-id-2 .av-image-hotspot-12 a').attr('title','hotspot-12');
$('#top.page-id-2 .av-image-hotspot-13 a').attr('title','hotspot-13');
$('#top.page-id-2 .av-image-hotspot-14 a').attr('title','hotspot-14');
$('#top.page-id-2 .av-image-hotspot-15 a').attr('title','hotspot-15');
$('#top.page-id-2 .av-image-hotspot-16 a').attr('title','hotspot-16');
$('#top.page-id-2 .av-image-hotspot-17 a').attr('title','hotspot-17');

$('#top.page-id-3 .av-image-hotspot-1 a').attr('title','hotspot-1');
$('#top.page-id-3 .av-image-hotspot-2 a').attr('title','hotspot-2');
$('#top.page-id-3 .av-image-hotspot-3 a').attr('title','hotspot-3');
$('#top.page-id-3 .av-image-hotspot-4 a').attr('title','hotspot-4');
$('#top.page-id-3 .av-image-hotspot-5 a').attr('title','hotspot-5');
$('#top.page-id-3 .av-image-hotspot-6 a').attr('title','hotspot-6');
$('#top.page-id-3 .av-image-hotspot-7 a').attr('title','hotspot-7');
$('#top.page-id-3 .av-image-hotspot-8 a').attr('title','hotspot-8');

$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_hotspot_title_script');

but I can’t say that one way is better than the other, I guess it’s just preference.

Best regards,
Mike

Hi,
On the page Modifier les thèmes under Fichiers du thème please click on the title functions.php

I added the script for you, please check.
If you find a page that is still showing the mouse-over image titles, please link to it so we can examine and adjust the script.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Angelo,
Please see this thread for the temp solution until the next update.
If you don’t want to edit the theme files, just uncheck Use first slides caption as permanent caption option and the buttons will work correctly.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
It looks like you have changed the image, yesterday the image used was ours-2560-x-1440-1, note the paw:

today the image is ours-2560-x-1440, note the paw:

and today the frontend view matches the new image at 1280×720

So it looks like your image change has corrected, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, I examined closer on my demo site and found that by entering the image URL directly the WordPress media library meta fields are not called like they are when a gallery element is, so I don’t see a way to get the title from the link.
But the following script will allow you to add specific titles to each hotspot and show it in the lightbox.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_hotspot_title_script() { ?>
  <script>
(function($){
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
$('.av-image-hotspot-2 a').attr('title','hotspot-2');
$('.av-image-hotspot-3 a').attr('title','hotspot-3');
$('.av-image-hotspot-4 a').attr('title','hotspot-4');
$('.av-image-hotspot-5 a').attr('title','hotspot-5');
$('.av-image-hotspot-6 a').attr('title','hotspot-6');
$('.av-image-hotspot-7 a').attr('title','hotspot-7');
$('.av-image-hotspot-8 a').attr('title','hotspot-8');
$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_hotspot_title_script');

and adjust the titles to suit, for example for hotspot 1, change $('.av-image-hotspot-1 a').attr('title','hotspot-1'); to $('.av-image-hotspot-1 a').attr('title','custom title for hotspot 1');
I assume that this is your only hotspot element on your site, if not them we can make this script work on this one page only by adding page IDs to it.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike