![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
September 7, 2023 at 4:21 pm #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 1 year ago by
domchocolate.
-
This topic was modified 1 year ago by
domchocolate.
September 8, 2023 at 9:24 am #1418428Hi, 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 #1418686Anyone? Any thoughts?
September 11, 2023 at 1:15 am #1418701Hi,
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,
MikeSeptember 11, 2023 at 12:03 pm #1418733Thanks, 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 #1418739Hi,
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,
MikeSeptember 11, 2023 at 1:51 pm #1418745Hi 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 12 months ago by
domchocolate.
September 11, 2023 at 2:12 pm #1418747Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit
-
This reply was modified 12 months ago by
domchocolate.
September 11, 2023 at 2:20 pm #1418748Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit
-
This reply was modified 12 months ago by
domchocolate.
September 11, 2023 at 3:53 pm #1418761Hi 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 12 months ago by
domchocolate.
September 11, 2023 at 5:40 pm #1418784Hi,
Glad to hear that you get this working, do you find it a suitable solution?Best regards,
MikeSeptember 11, 2023 at 5:46 pm #1418785Yeah, 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 #1418787Plus, 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 #1418790Hi,
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,
MikeSeptember 11, 2023 at 9:56 pm #1418798Hi 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 #1418799Actually 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 #1418812Hi,
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,
MikeSeptember 12, 2023 at 11:42 am #1418874Lovely work, Mike – really happy with that.
Thanks again for your hard work.
Dominic
September 12, 2023 at 12:34 pm #1418879Hi,
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 -
This topic was modified 1 year ago by
-
AuthorPosts
- The topic ‘Clickable hotspots rather than rollover in 2023’ is closed to new replies.