Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • September 7, 2023 at 4:21 pm #1418375
    domchocolate

    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 1 year, 3 months ago by domchocolate.
    • This topic was modified 1 year, 3 months ago by domchocolate.
    September 8, 2023 at 9:24 am #1418428
    domchocolate

    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

    September 10, 2023 at 8:40 pm #1418686
    domchocolate

    Anyone? Any thoughts?

    September 11, 2023 at 1:15 am #1418701
    Mike

    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

    September 11, 2023 at 12:03 pm #1418733
    domchocolate

    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

    September 11, 2023 at 12:39 pm #1418739
    Mike

    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

    September 11, 2023 at 1:51 pm #1418745
    domchocolate

    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

    • This reply was modified 1 year, 3 months ago by domchocolate.
    September 11, 2023 at 2:12 pm #1418747
    domchocolate

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

    • This reply was modified 1 year, 3 months ago by domchocolate.
    September 11, 2023 at 2:20 pm #1418748
    domchocolate

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

    • This reply was modified 1 year, 3 months ago by domchocolate.
    September 11, 2023 at 3:53 pm #1418761
    domchocolate

    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!

    • This reply was modified 1 year, 3 months ago by domchocolate.
    September 11, 2023 at 5:40 pm #1418784
    Mike

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

    Best regards,
    Mike

    September 11, 2023 at 5:46 pm #1418785
    domchocolate

    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

    September 11, 2023 at 5:57 pm #1418787
    domchocolate

    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.

    September 11, 2023 at 6:42 pm #1418790
    Mike

    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

    September 11, 2023 at 9:56 pm #1418798
    domchocolate

    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

    September 11, 2023 at 9:58 pm #1418799
    domchocolate

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

    Dominic

    September 12, 2023 at 12:59 am #1418812
    Mike

    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

    September 12, 2023 at 11:42 am #1418874
    domchocolate

    Lovely work, Mike – really happy with that.

    Thanks again for your hard work.

    Dominic

    September 12, 2023 at 12:34 pm #1418879
    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

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