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 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

Hi,
Thanks Guenni007, good catch, I had originally commented this out to correct above but didn’t realize it has in two locations, I removed it from the second location and now it is corrected.
Veloryana please ensure that you clear your browser cache before checking again.

Best regards,
Mike

Hi,
Guenni007 thank you for your detailed solution and example.

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

Hey BFred,
Thanks for your question, please check that lightbox is enabled at Enfold Theme Options ▸ Lightbox Modal Window
If this doesn’t correct please include admin login in the Private Content area so we can investigate.

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,
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