Image hotspot Tooltips with click – again - again 2018 - Support

Tagged: click, image hotspot, tooltip

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

Author

Posts
October 22, 2018 at 12:27 pm #1024820
HuxburyQuinn
Participant
2014 – https://kriesi.at/support/topic/tooltips-with-click/
2015 – https://kriesi.at/support/topic/image-hotspots-clickable-rather-than-on-hover/
2016 – https://kriesi.at/support/topic/tooltips-with-click-again/

How to achieve image hotspot tool tip with click – 2018 ?
I want the image hotspot tool tip remain open allowing for tooltip HTML content buttons clickable etc.
Tooltip can be closed by clicking the hotspot number or click another tooltip number.
– – – – – – – – – – – – – – – – – –
FILES
enfold/config-templatebuilder/avia-shortcodes/imagehotspots.php
enfold/js/avia.js
enfold/config-templatebuilder/avia-template-builder/assets/js/avia-modal.js

– – – – – – – – – – – – – – – – – –
ADD new OPTION
enfold/config-templatebuilder/avia-shortcodes/imagehotspots.php line 285

As this is not a part of the theme release – how do I change this from the child theme?
```
						
"subtype" => array(
__('On Mouse Hover', 'avia_framework' ) =>'',
/*add new option click*/ __('On Mouse Click', 'avia_framework' ) =>'av-click-tooltip',
__('Always',		 'avia_framework' ) =>'av-permanent-tooltip',
)
),
```
– – – – – – – – – – – – – – – – – –
How to add a click function ?
Could we just duplicate this function and change the var, class and events ?
where can this file be copied to in the child theme?

enfold/js/avia.js line 2217
```
    $.AviaTooltip.prototype =
    {
        bind_events: function()
        {
	        var perma_tooltips		= '.av-permanent-tooltip [data-'+this.options.data+']',
	        	default_tooltips	= '[data-'+this.options.data+']:not( .av-permanent-tooltip [data-'+this.options.data+'])';	        
	        this.scope.on('av_permanent_show', perma_tooltips, $.proxy( this.display_tooltip, this) );
	        $(perma_tooltips).addClass('av-perma-tooltip').trigger('av_permanent_show');	        
			this.scope.on(this.options.event + ' mouseleave', default_tooltips, $.proxy( this.start_countdown, this) );	        
            if(this.options.event != 'click')
            {
                this.scope.on('mouseleave', default_tooltips, $.proxy( this.hide_tooltip, this) );
            }
            else
            {
                this.body.on('mousedown', $.proxy( this.hide_tooltip, this) );
            }
```
– – – – – – – – – – – – – – – – – –
how do i add a click event ?
enfold/config-templatebuilder/avia-template-builder/assets/js/avia-modal.js line 892
```
   			/*add behavior that connects hotspot and modal subelements*/
   			general_behavior: function()
   			{
   				/*trigger click event*/
   				_self.hotspot_container.on('click', '.av-image-hotspot', function()
   				{
   					var el = $(this).data('modal_sub_el');
   					if(el) el.find('.avia-modal-group-element-inner').trigger('click');
   				});   			
   				/*highlight the modal sub el when hotspot is hovered*/
   				_self.hotspot_container.on('mouseenter', '.av-image-hotspot', function()
   				{
   					var el = $(this).data('modal_sub_el');
   					if(el) el.addClass('av-highlight-subel');
   				});
   				_self.hotspot_container.on('mouseleave', '.av-image-hotspot', function()
   				{
   					var el = $(this).data('modal_sub_el');
   					if(el) el.removeClass('av-highlight-subel');
   				});   				
   				/*highlight the hotspot when modal sub el is hovered*/
   				_self.modal_group.on('mouseenter', '.avia-modal-group-element', function()
   				{
   					var el = $(this).data('hotspot');
   					if(el) el.addClass('active_tooltip');
   				});
   				_self.modal_group.on('mouseleave', '.avia-modal-group-element', function()
   				{
   					var el = $(this).data('hotspot');
   					if(el) el.removeClass('active_tooltip');
   				});
```
your assistance in implementing this would be greatly appreciated.

Including this in the next Enfolds update would be fantastic!
October 23, 2018 at 3:36 am #1025216
HuxburyQuinn
Participant
I have had a hack at the JS in avia.js from within the child theme and achieved 90% of the functionality. example provide privately.
LINE 2219
```
        bind_events: function()
        {
	        var click_tooltips		= '.av-click-tooltip [data-'+this.options.data+']';
			this.scope.on(this.options.event + ' mouseenter', click_tooltips, $.proxy( this.start_countdown, this) );
			   if(this.options.event != 'click')
				{
					this.scope.on('mousedown', click_tooltips, $.proxy( this.hide_tooltip, this) );
				}
				else
				{
					this.body.on('mouseleave', click_tooltips, $.proxy( this.hide_tooltip, this) );
				}
  },
```
mouseenter the hotspot number = tool tip is shown
mouseleave the hotspot number= tool tip remains open
mouseenter the hotspot number = tool tip is shown again with a re animated flicker
Click the hotspot number = tool tip is closed

This allows for interaction of elements within the tool tip. Not Ideal but it’s a quick hack to show the client.
I could not work out how to activate the tooltip on ‘click’ as avia-tooltips.js is very similar to avia.js (lines 1565 – 1824 ) have very similar functions. with default event: ‘mouseenter’

Q1. Please advise which js overrides the other for the image hot spot ‘mouseenter’

Q2. avia.js line 1570 delayHide: 0, this variable is not used in the js – at all. in avia.js or avia-tooltips.js
It would be fair to assume that by including the variable delayHide (set at a high value) on the mouseleave event – the tool tip would remain open for a set amount of time. Again allowing for interaction of the html elements in the tooltip.

Q3. Ultimately I’d like to remove the flicker on the second mouseenter by changing this to a click event to open and close the tool tip. and only have one tooltip open at one time. i.e if another hotspot was clicked the current open tooltip would close and the new tooltip would open.

Coding Suggestions greatly appreciated
November 8, 2018 at 1:13 pm #1031230

Günter
Keymaster

Hi,

Thank you for using Enfold – and sorry for the late reply.

I will check with Kriesi if this is something to add to core and will let you know, when we have a decision.

Best regards,
Günter

November 11, 2018 at 2:42 am #1032123
crushingpixels
Participant
This was my solution. I set the “Show Tool Tips” to “Always” and added some JS via functions.php. (wp_enqueue_scripts function)
```
(function( $ ) {
	 $(window).ready(function() {
               jQuery('.avia-tooltip').hide();	
	       $('.av-image-hotspot_inner').on( "click", function(e) {
		      jQuery(this).siblings('.avia-tooltip').toggle('slow');
	        });
         });
})(jQuery);
```
November 11, 2018 at 2:46 am #1032125
crushingpixels
Participant
For those that want to copy and paste into functions.php file and don’t have a separate enqueued JS file.
```
function hide_show_tooltips (){ ?>
    <script>
(function( $ ) {
	 $(window).ready(function() {
               jQuery('.avia-tooltip').hide();	
	       $('.av-image-hotspot_inner').on( "click", function(e) {
		      jQuery(this).siblings('.avia-tooltip').toggle('slow');
	        });
         });
})(jQuery);
    </script>
<?php }
add_action('wp_footer', 'hide_show_tooltips');
```
November 12, 2018 at 1:38 am #1032384

HuxburyQuinn
Participant

HI blafoley,
Thanks for sharing your solution.

I disabled all my customisations for this and implemented your code in functions.php – Set Hotspots to ‘always show’, However the widow ready function did not hide the tooltips on the page load. I had to click each hotspot to closed the open tooltip. Once closed the click function worked well. I also tried loading this via ‘wp_header` with out effect.

Overriding the functionality via jQuery has given me some ideas though. Thanks ; )
I have my PHP Guy looking into options and will report back once we have a solution.

December 21, 2018 at 1:45 am #1047985
HuxburyQuinn
Participant
The Final Interim Solution.

Copy avia.js from the Parent Theme enfold > js > avia.js to the Child Theme enfold-child > js > avia.js

Then in the child theme functions.php file enqueue avia.js to load from the new location
```
function wp_change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );
```
enfold-child open and edit the avia.js file

At the top of the file replace/add the following:
```
(function($)
{	
    "use strict";
    
    // EXTENSION ----------------------------------------------------------------
	// KEEP IN OUTER SCOPE i.e. not in doc ready
    var active_hotspot = null;
    var active_hotspot_previous = null;

    function guidGenerator() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }

    $('body').on('mouseover', 'div.av-image-hotspot.av-display-hotspot', function (e) {
        var guid = guidGenerator();

        if (active_hotspot && active_hotspot !== $(this).attr('data-guid') )  {
            active_hotspot_previous = active_hotspot;
        }
        active_hotspot = guid;
        $(this).attr('data-guid', guid);

    });

    $('body').on('mouseleave', 'div.av-image-hotspot.av-display-hotspot', function (e) {
        if ( $(this).attr('data-guid') === active_hotspot ) {
            e.preventDefault();
            e.stopImmediatePropagation();
            return false;
        }
    });
    // EXTENSION ----------------------------------------------------------------

    $(document).ready(function()
```
Scroll down to the following Function line 1645
```
        display_tooltip: function(e)
        {
```
add this replace/add this code:
```
      display_tooltip: function(e)
        {
        	// EXTENSION ----------------------------------------------------------------
            if ( active_hotspot_previous !== $(e.currentTarget).attr('data-guid') ) {
                $('[data-guid]').trigger('mouseleave');
            }

            if ( $(e.currentTarget).hasClass('open') ) {
                return false;
            }

            $('[data-guid]').removeClass('open');
            $(e.currentTarget).addClass('open');
            // EXTENSION ----------------------------------------------------------------        	
            var _self		= this,
```
Avia Layout Builder set the Image Hot Spot to Show Tooltips – On Mouse Hover

The hotspot tooltip will show on mouse hover and remain visible, allowing the user to interact with hotspot content buttons, links etc.
Only one hot spot tooltip will remain visible. When you hover a second hotspot the first hotspot tooltip will hide and the new hotspot tooltip will be visible.
December 22, 2018 at 9:10 pm #1048639

Victoria
Inactive Moderator

Hi HuxburyQuinn,

Thank you for sharing your solution :)

Best regards,
Victoria

September 7, 2023 at 4:10 pm #1418373
domchocolate
Participant
Hi

I see there are a lot of threads kike this one 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.

Can anyone help?
- This reply was modified 1 year, 3 months ago by domchocolate.
September 11, 2023 at 1:17 am #1418702
Mike
Moderator
Hi,
On your other thread about this I posted this:
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 12, 2023 at 12:41 pm #1418881
Mike
Moderator
Hi,
For future readers please see the final solution at this thread
With the hotspot tooltips set to always show add this code to the end of your child theme functions.php file in Appearance ▸ Editor:
```
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);
```
and on tooltips should show on page load and clicking a hotspot will show a tooltip then clicking any other hotspot will close any other open tooltip and open the one clicked.

Best regards,
Mike
Author

Posts