Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #703189

    Hello

    1. On mobile my hotspots appear as a list underneath the image, but they are not clickable links. How can I make list of hotspot clickable?
    2. How can I make list appear under image on larger screens as well?

    #704341

    Hey snitt,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .responsive .av-hotspot-fallback-tooltip {
        display: block;
    }
    

    Then go to enfold/config-templatebuilder/avia-shortcodes/image_hotspots.php file and find

    			function add_fallback_tooltip($hotspot, $counter)
    			{
    				$content = $hotspot['content'];
    				
    				if(empty($content)) return;
    				
    				$output  = "";
    				$output .= "<div class='av-hotspot-fallback-tooltip'>";
    				$output .= "<div class='av-hotspot-fallback-tooltip-count'>";
    				$output .= $counter;
    				$output .= "<div class='avia-arrow'></div></div>";
    				$output .= "<div class='av-hotspot-fallback-tooltip-inner clearfix'>";
    				$output .= ShortcodeHelper::avia_apply_autop($content);
    				$output .= "</div>";
    				$output .= "</div>";
    				
    				return $output;
    			}

    and change it to

    			function add_fallback_tooltip($hotspot, $counter)
    			{
    				$content = $hotspot['content'];
                    
    
    					$blank  = strpos($link_target, '_blank') !== false ? ' target="_blank" ' : "";
    					$blank .= strpos($link_target, 'nofollow') !== false ? ' rel="nofollow" ' : "";
    					
    					$link = aviaHelper::get_url($link, false);
    					$tags = array("a href={$link} {$blank}", 'a');
    				
    				if(empty($content)) return;
    				
    				$output  = "";
    				$output .= "<div class='av-hotspot-fallback-tooltip'>";
    				$output .= "<div class='av-hotspot-fallback-tooltip-count'>";
    				$output .= $counter;
    				$output .= "<div class='avia-arrow'></div></div>";
    				$output .= "<div class='av-hotspot-fallback-tooltip-inner clearfix'>";
                        $output .= "<".$tags[0].">";
    				$output .= ShortcodeHelper::avia_apply_autop($content);
                        $output .= "</".$tags[1].">";
    				$output .= "</div>";
    				$output .= "</div>";
    				
    				return $output;
    			}

    Best regards,
    Yigit

    #1046488

    Dear Yigit,
    Thanks for your kind help on this TOPIC.
    I’ve the same problem of user “Snitt”.
    I’ve copied your code above on enfold/config-templatebuilder/avia-shortcodes/image_hotspots.php and links are now active, but (on mobile) destination of all link is always on self page.
    How it is possible to have different links on different list?

    #1046500

    Hi,

    @webba this thread is pretty old and hotspot element now supports links. Please do not make any modification on the file and simply edit your hotspots and append links to each hotspot :)

    Best regards,
    Yigit

    #1046512

    I apologize! My distraction!
    Thank you for your kind support!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Hotspot on mobile’ is closed to new replies.