Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1024820

    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!

    #1025216

    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

    #1031230

    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

    #1032123

    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);
    #1032125

    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');
    #1032384

    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.

    #1047985

    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.

    #1048639

    Hi HuxburyQuinn,

    Thank you for sharing your solution :)

    Best regards,
    Victoria

    #1418373

    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 8 months, 3 weeks ago by domchocolate.
    #1418702

    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

    #1418881

    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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Image hotspot Tooltips with click – again – again 2018’ is closed to new replies.