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

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

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

Hey Frans,

Thank you for the inquiry.

This is possible but you have modify one of the script files directly. Please check the following threads for more info.

// https://kriesi.at/support/topic/close-a-hot-spot-by-clicking-anywhere-away-from-it/#post-1277247
// https://kriesi.at/support/topic/image-hotspot-tooltips-with-click-again-again-2018/#post-1025216

Best regards,
Ismael

Hi,

Please try using the first code as the following:

#footer-page .av-social-sharing-box .av-share-link .avia-related-tooltip {
  display: none !important;
}

The second code should have worked. Please make sure to clear any server-side, plugin-based, and browser caches. If that doesn’t help, please check your custom CSS for errors. You can use this website http://csslint.net/ to do that.

If the suggestions above don’t work, please create temporary admin logins and share them with us in the private content field.

Best regards,
Yigit

• This reply was modified 2 years, 5 months ago by Yigit.

Hey sarthakchoudhary,

Please try the following in Quick CSS under Enfold->General Styling:

#footer-page .av-social-sharing-box .av-share-link .avia-related-tooltip {
  display: none; 
}

#footer-page .av-social-sharing-box.av-social-sharing-box-icon .av-share-box ul li a {
  color: red;
}

Best regards,
Rikard

Hi,
originally I gave you this css to move the header to the bottom:

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

then you asked to move the menu more to the middle to make room for your live chat icon at the bottom right, so I recommend adding this css also:

@media only screen and (max-width: 767px){
.responsive #top #wrap_all .container.av-logo-container {
    width: 70%;
    max-width: 70%;
}
}

Best regards,
Mike

Hi,
Please use this css with the other css together:

@media only screen and (max-width: 767px){
.responsive #top #wrap_all .container.av-logo-container {
    width: 70%;
    max-width: 70%;
}
}
@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

Best regards,
Mike

Hey Gagik,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey woogie07,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.av-image-hotspot .inner_tooltip p {
	font-size: 13px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
I css your number 4 hotspot is wrapping the text in a div instead of the “p” tag, so this css won’t change that font size, perhaps you were testing?

Best regards,
Mike

Hey papieren,
Please see this article: How do I create a link to directions?
Then add your link to the tooltip field for your marker, for example:

<a title="Google Map and Clickable Directions" href="
https://www.google.com/maps/dir/43.0342144,-71.5128832/Boston,+M (Email address hidden if logged out) ,-71.5620741,10z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x89e3652d0d3d311b:0x787cbf240162e8a0!2m2!1d-71.0588801!2d42.3600825!3e0" target=blank>For Directions & a detailed Google Map click here</a>

then when the marker is clicked the tooltip with the link will show:

Best regards,
Mike

Hey!

Glad to know that you’ve found a solution. In case you require an alternative, please try this code in the functions.php file.

// custom script: disable link when AJAX search is open
function ava_custom_script_search_disable_links()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $('a').on('click', function(e) {   
                var search = $('.avia-search-tooltip');
                
                if(search && search.css('display') == 'block') 
                {
                    e.preventDefault();
                    return;
                }
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_search_disable_links', 9999 );

Cheers!
Ismael

Hey Tim,

Sorry for the late reply.

The underlying js for the search icon behaviour can be found in enfold\js\avia.js line 69:

new $.AviaTooltip({ …..

and line 90:

new $.AviaAjaxSearch({scope:’#header, .avia_search_element’});

As far as I see there is no easy way to remove this without hacking core js. If you do this and use minify or merged files you need to minifiy this js file again (or make a copy of unminified and name it avia.min.js

You could try to rename the class avia-search-tooltip and remove data-avia-search-tooltip on pageload before avia.js is executed.
Or remove the HTML completly and insert your own icon HTML and bind this to your js (which seems to be the easiest and clean solution for me).

Hope this helps you.

Best regards,
Günter

Hey waveseven,

Thank you for the inquiry.

There is no option for this by default but according to this thread, you can achieve it by modifying the chartjs options. Unfortunately, this is beyond the scope of support.

// https://stackoverflow.com/questions/72767458/chartjs-show-tooltip-automatically

Best regards,
Ismael