Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 11, 2022 at 11:34 am #1368413
    domchocolate

    Hi I would like to use Image Hotspots within a Tab Section. It is working apart from a small bug.

    Please see the link below.

    In each of the tooltips, I’d like a More information button. In order for the user to navigate to this, the hotspots need to be set to show on mouse hover/hide on click. Unfortunately, if a user has activated a tooltip and then navigates to a different section tab, the tooltip from the previous Image Hotspot in the previous tab is still open.

    Is there a way to close all open tooltips when navigating to a different tab?? Or alternatively, the tooltip disappears on mouse rollout of the tooltip area.

    I appreciate I could change the setting of the Image Hotspot to On mouse hover and set a link on the hotspot dot but my client feels this isn’t intuitive and I don’t want to write “Click number for more information” as that would be a bit rubbish.

    Thanks in advance for your help

    Dominic

    October 12, 2022 at 9:43 am #1368536
    Ismael

    Hey domchocolate,

    Thank you for the inquiry.

    Adding the following script in the functions.php file might help. The script should hide the tooltip when switching tabs.

    
// custom script: hide tooltip on tab click
function ava_custom_script_hide_tooltip()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('.av-tab-section-tab-title-container').on('click', function(event) {
                    $('.avia-tooltip').animate({
                        opacity: 0,
                        display: 'none'
                    }, 300);
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_hide_tooltip', 9999 );

    Best regards,
    Ismael

    October 12, 2022 at 11:22 am #1368561
    domchocolate

    Whoop, whoop! That’s brilliant. Thanks Ismael!

    October 12, 2022 at 12:01 pm #1368565
    Mike

    Hi,
    Glad Ismael could help, shall we close this then?

    Best regards,
    Mike

    October 12, 2022 at 4:54 pm #1368597
    domchocolate

    Not quite – I want to use SVGs in there but I’m having issues with sizing. Any ideas how to get svgs to behave like pngs?

    October 12, 2022 at 5:26 pm #1368609
    domchocolate

    Aha – sussed it!

    October 12, 2022 at 6:39 pm #1368624
    Mike

    Hi,
    Sorry, I don’t understand sussed, did you sort it out?

    Best regards,
    Mike

    October 13, 2022 at 3:31 pm #1368747
    domchocolate

    Sorry, Mike. Sussed is a colloquial term I guess. It means sorted; figured out; solved. Thanks again!

    October 13, 2022 at 7:00 pm #1368761
    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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Image Hotspot and Tab Section’ is closed to new replies.