Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1418375

    Hi

    I see there are a lot of threads around creating clickable hotspots rather than rollover ones. However, none do exactly what I need them to do or work in more recent versions of Enfold. So I wonder if anyone can help.

    This is how I’d like it to work:
    1 A Hotspot activates a tooltip onclick (rather than rollover) and stays activated (to enable users to click for more information on that tooltip)
    2 The tooltip closes when the user clicks on the corresponding hotspot OR selects a new hotspot by clicking on it.

    I appreciate that Show on mouse hover – hide on click does something similar but it is confusing users in testing.

    Please see https://owe.brother.design/discover/ for the map. Password below in private content

    Can anyone help?

    • This topic was modified 9 months, 1 week ago by domchocolate.
    • This topic was modified 9 months, 1 week ago by domchocolate.
    #1418428

    Hi, further to above – I got it HALF working with the following code and setting the tooltip as – always

    //Clickable hotspots on ALWAYS
    (function( $ ) {
    	 $(window).ready(function() {
                   jQuery('.avia-tooltip').hide();	
    	       $('.av-image-hotspot_inner').on( "click", function(e) {
    		      jQuery(this).siblings('.avia-tooltip').toggle('slow');
    	        });
             });
    })(jQuery);

    However, the tooltip doesn’t close/hide when I click on another hotspot.

    See example: https://oxwedev.wpengine.com/this-is-a-map-test/
    Username and password below.

    Thanks in advance

    Dominic

    #1418686

    Anyone? Any thoughts?

    #1418701

    Hi,
    In my test with the hotspot tooltip set to show – always
    this hides all of the tooltips until one is clicked and when the next one is clicked the others are hidden.

    (function($) {
     $(window).ready(function() {
               $('.avia-tooltip').hide();	
           $('.av-image-hotspot_inner').on( "click", function(e) {
           	var $this = $(this).parent().find('.avia-tooltip');
    	      $(this).siblings('.avia-tooltip').toggle('slow');
    	      $('.avia-tooltip').not($this).hide();
            });
         });
    })(jQuery);

    Best regards,
    Mike

    #1418733

    Thanks, Mike

    Close, but no cigar for me yet. If you check this page: https://oxwedev.wpengine.com/this-is-a-map-test/ – password below – you’ll see the hotspots appear and disappear quickly. I think this is because the code is clashing with:

    // custom script: hide the tooltip on the 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').css({
                            opacity: 0,
                            display: 'none'
                        });
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
    add_action( 'wp_footer', 'ava_custom_script_hide_tooltip', 9999 );

    This code hides any visible tooltips when we click on a section tab – very important.

    The clash is causing:
    1. The clickable hotspots to open and close really quickly, and;
    2. The clickable hotspots to stop working at all if you navigate away from the tab and back again.

    Is there a way to tweak this/these code/s so that they don’t clash?

    I really appreciate any help you can provide.

    Dominic

    #1418739

    Hi,
    Please try the snippet alone, in my test in worked, also note that I assumed that you would wrap it in a function if you are testing it in the functions.php, like this:

    function one_hotspot_only_script() { ?>
      <script>
    (function($) {
     $(window).ready(function() {
               $('.avia-tooltip').hide();	
           $('.av-image-hotspot_inner').on( "click", function(e) {
           	var $this = $(this).parent().find('.avia-tooltip');
    	      $(this).siblings('.avia-tooltip').toggle('slow');
    	      $('.avia-tooltip').not($this).hide();
            });
         });
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'one_hotspot_only_script', 99);

    It looks like your script above is hiding the tooltip on click, including the one clicked, my script already hides the ones except the one clicked.

    Best regards,
    Mike

    #1418745

    Hi Mike
    I have removed the code that was needed for the section tabs, and I am just running your code (I tried it as a JS snippet, as a PHP snippet and PHP in functions.php). The code is doing something because the tooltips are appearing and not showing them all at once. But they are disappearing as quickly as they appear.

    I have set up an instance on a dev server here.

    https://oxwedev.wpengine.com/this-is-a-map-test/

    Any ideas? Thanks again for your hard work on this.

    Dominic

    #1418747

    Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit

    #1418748

    Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit

    #1418761

    Hi Mike – fixed it. I had an old bit of Javascript hiding in an enqueued file that was trying to do the same thing and broke it!

    #1418784

    Hi,
    Glad to hear that you get this working, do you find it a suitable solution?

    Best regards,
    Mike

    #1418785

    Yeah, it’s pretty good. I’m not sure I like the way the tooltip draws from top left to bottom right on activation – I don’t like the way the text wraps. Is there a way to tweak that?

    Thanks again, Mike

    Dominic

    #1418787

    Plus, is there a way to get the tooltip to sit above the hotspots? At the moment, a higher numbers hotspot appears on top of the activated tooltip.

    #1418790

    Hi,
    When you say that you don’t like the text wrapping, I assume that you want the tooltips larger, currently they are 250px, try this css and adjust to suit:

    body#top .av-tt-large-width {
        width: 300px;
    }

    It looks like to place the tooltip over the other numbers you need to set the z-index of the open tooltip parent av-image-hotspot to at least 3.
    So this will need to be done with jQuery in the above script, perhaps something like $(this).parent().find(‘.av-image-hotspot’).css({‘z-index’:’3′});
    For me the draw open looks like a cool animation, but I think to remove it we need to add and remove opacity to the script, I will try to adjust this later unless you get to it first.

    Best regards,
    Mike

    #1418798

    Hi Mike

    When I say wrapping I mean the text auto-wraps as the tooltip ‘grows’ – I’ve got quite a bit of content in my tooltips and I think this looks a bit hokey. Check out https://oxwedev.wpengine.com/this-is-a-map-test/ to see this happening. If we could fix that then the drawer effect would bother me less. Otherwise, maybe a simple fade would suffice.

    I’ll try the z-index now.

    Dominic

    #1418799

    Actually on the z-index I may need some help in inserting it into our existing code. Thanks

    Dominic

    #1418812

    Hi,
    I believe that I sorted out the z-index, and I noticed that in the code that .toggle(‘slow’); was used, I changed it to .toggle(‘show’); and it seems quicker and the animation of the text wrap less, otherwise I didn’t find another way around that.

    function one_hotspot_only_script() { ?>
      <script>
    (function($) {
     $(window).ready(function() {
               $('.avia-tooltip').hide();	
           $('.av-image-hotspot_inner').on( "click", function(e) {
           	var $this = $(this).parent().find('.avia-tooltip');
           	$(this).parent().css({'z-index':'9'});
    	      $(this).siblings('.avia-tooltip').toggle('show');
    	      $('.avia-tooltip').not($this).hide();
    	      $('.avia-tooltip').not($this).parent().css({'z-index':'1'});
            });
         });
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'one_hotspot_only_script', 99);

    Best regards,
    Mike

    #1418874

    Lovely work, Mike – really happy with that.

    Thanks again for your hard work.

    Dominic

    #1418879

    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

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Clickable hotspots rather than rollover in 2023’ is closed to new replies.