Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1273669

    Is there any way I can have the logo inside each hotspot like on the page as shown in Private Content and image here

    Untitled-2

    #1273729

    is it an icon-grid element?
    if so – give a custom class to this element f.e.: insert-logo

    then insert this to your child-theme functions.php:

    function insert_logo_to_tooltip() { 
    ?>
    <script>
    (function($){
       $('.insert-logo .avia-icongrid-text').append( '<p><img class="aligncenter" src="/wp-content/uploads/logo.png" alt="YourLogo" width="40" height="40" /></p>' );
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_logo_to_tooltip');

    on src put in your link to your logo.

    #1273777

    No – it’s a image with hotspot!

    #1273856

    same shit different selector ;)
    again custom class at “image with hotspots” element: insert-logo

    try:

    function insert_logo_to_tooltip_of_image_hotspot() { 
    ?>
    <script type="text/javascript">
    (function($) {
    	$('.insert-logo .av-image-hotspot').each( function() {
    		var tooltipContent =  $(this).data('avia-tooltip');
    		$(this).data('avia-tooltip', tooltipContent+' <p class="tooltip-logo"><img class="aligncenter" src="/wp-content/uploads/logo.png" alt="YourLogo" width="40" height="40" /></p>');
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'insert_logo_to_tooltip_of_image_hotspot');

    you can shift that little logo by that class added via that script

    .tooltip-logo {
        width: 30px;
        display: inline-grid;
        height: 30px;
        margin: -20px 0 0;
    }


    Edit:
    these are added on closed tooltips by opening via hover. I had to look what we need for always opened tooltips.
    : the same but styling is better via quick css – see above.

    btw. the fallback “toolttips” : it is better inserted via css f.e.

    .av-hotspot-fallback-tooltip-inner p {
      text-align: left !important;
      padding-left: 40px;
      float: left;
    }
    
    .av-hotspot-fallback-tooltip-inner p::before {
      content: "";
      width: 30px;
      height: 30px;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      background-image: url(/wp-content/uploads/logo.png);
      background-size: 30px;
      position: absolute;
      background-repeat: no-repeat;
      margin: 0 50px 0 10px;
      float: left;
    }

    if your logos had to be on the right side when fallback is shown set f.e: left to auto and right:0

    • This reply was modified 3 years, 11 months ago by Guenni007.
    #1273950

    I have used your code and it has put the icon in the reveal window (which I actually quite like and will keep), but is there a way to get it in the circle as shown in the image

    Screenshot-2021-01-20-083609

    #1273973

    Hi,

    Please add following code to Quick CSS

    .insert-logo .av-image-hotspot_inner {
        background-image: url(/wp-content/uploads/2021/01/hovericon.png);
        background-size: contain;
    }


    @Guenni007
    Thanks for your help as always El Supremo! :)

    Best regards,
    Yigit

    #1274026

    From the images above only i couldn’t see that these white dots are the given hotspots in the hotspot image alb ( Aren’t they outside the hotspot field? )- i thougt that white circlee is part of your logo.
    Sorry.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.