Clickable hotspots rather than rollover in 2023 - Support | Kriesi.at

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
September 7, 2023 at 4:21 pm #1418375
domchocolate
Participant
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, 2 months ago by domchocolate.
- This topic was modified 1 year, 2 months ago by domchocolate.
September 8, 2023 at 9:24 am #1418428
domchocolate
Participant
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
Participant

Anyone? Any thoughts?

September 11, 2023 at 1:15 am #1418701
Mike
Moderator
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
Participant
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
Moderator
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
Participant
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, 2 months ago by domchocolate.
September 11, 2023 at 2:12 pm #1418747
domchocolate
Participant
Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit
- This reply was modified 1 year, 2 months ago by domchocolate.
September 11, 2023 at 2:20 pm #1418748
domchocolate
Participant
Hi Mike thought I’d fixed it but I haven’t… ignore this message/edit
- This reply was modified 1 year, 2 months ago by domchocolate.
September 11, 2023 at 3:53 pm #1418761
domchocolate
Participant
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, 2 months ago by domchocolate.
September 11, 2023 at 5:40 pm #1418784

Mike
Moderator

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
Participant

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
Participant

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

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
Participant

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

Lovely work, Mike – really happy with that.

Thanks again for your hard work.

Dominic

September 12, 2023 at 12:34 pm #1418879

Mike
Moderator

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.