Hey fabio,
Thanks for the link to your page, it looks like you are using the default tooltip size, you can also choose “large” & “extra-large”

Best regards,
Mike

Hey whdsolutions,

Thank you for the inquiry.

Adding this css code should adjust the style of the ul and ol list inside the tooltip.

.avia-tooltip ul, .avia-tooltip ol {
    list-style: disc outside !important;
}

Best regards,
Ismael

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

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

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

Best regards,
Mike

Hey Jody,

Thank you for the inquiry.

You can use the following css code to adjust the style of the placeholder text.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

And to change the placeholder text itself, add this code in the functions.php file.

/* AJAX SEARCH */
if ( ! function_exists( 'avia_append_search_nav_mod' ) ) {
    //first append search item to main menu
    remove_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 9997, 2 );
    remove_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 9997, 2 );
    add_filter( 'wp_nav_menu_items', 'avia_append_search_nav_mod', 9997, 2 );
    add_filter( 'avf_fallback_menu_items', 'avia_append_search_nav_mod', 9997, 2 );

    /**
     *
     *
     * @param string $items
     * @param array $args
     * @return string
     */
    function avia_append_search_nav_mod ( $items, $args )
    {
        if ( avia_get_option( 'header_searchicon', 'header_searchicon' ) != 'header_searchicon' ) {
            return $items;
        }

        if ( avia_get_option( 'header_position', 'header_top' ) != 'header_top' ) {
            return $items;
        }

        if ( ( is_object( $args ) && $args->theme_location == 'avia') || ( is_string( $args ) && $args = 'fallback_menu' ) ) {
            ob_start();
            get_search_form();
            $form = ob_get_clean();

            $form = str_replace( '<form ', '<form role="search" ', $form );
            $form = htmlspecialchars( $form );

            /**
             * Avoid duplicate indexing or empty search page
             *
             * @since 4.5.3
             * @param string $items
             * @param array $args
             * @return string
             */
            $nofollow = apply_filters( 'avf_nav_search_icon_nofollow', 'rel="nofollow"', $items, $args );

            $aria_label = __( 'Search', 'avia_framework' );
            $aria_label = apply_filters( 'avf_nav_search_aria_label', $aria_label, $items, $args );

            $items .=	'
 	<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special" role="menuitem">';
            $items .=		'<a aria-label="' . $aria_label . '" href="?s=" '. $nofollow . ' data-avia-search-tooltip="' . $form . '" ' . av_icon_string( 'search', false ) . '>';
            $items .=			'<span class="avia_hidden_link_text">' . __( 'ADJUST THIS TEXT', 'avia_framework' ) . '</span>';
            $items .=		'</a>';
            $items .=	'</li>
';
        }

        return $items;
    }
}

Replace “ADJUST THIS TEXT” with your own text.

Best regards,
Ismael

Hey gatehealing,

Thank you for the inquiry.

You can add this css code to remove the image overlay and allow the title tooltip to display on hover.

.avia-image-overlay-wrap a.avia_image .image-overlay {
    display: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

This is a limitation of the tooltip feature, which is why it is disabled on smaller screens and replaced by a different element. If you wish to display the tooltips on mobile view and extend their functionality, you may want to consider hiring a freelance developer.

Best regards,
Ismael

Hey HHMGCreative,

Thank you for the inquiry.

In mobile view, the hotspot tooltips should automatically switch to an accordion element, eliminating the need to tap the hotspots to close the tooltips. Is this not happening on your end?

Best regards,
Ismael

Hi,
Thanks for the link to your page, I think the solution will need to have the hotspots only show on click, not on hover like it is now. Will that be ok?
I’m thinking that this script could be modified to also allow the right side links to also open the tooltips, please include and admin login so we can try.
What is your plan for mobile devices? Currently below 767px the tooltips are displayed below the image and do not popup, are you going to keep it like this?

Best regards,
Mike

Hi,
Thank you for the link to your site, I found that you are not using a child theme and I didn’t see any other code snippet plugins, so I added the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.
I then added the function temporary_removal_title_tags and cleared my browser cache and now the titles are not shown on mouse-over:

please clear your browser cache and check. Please note Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hey Karin_Tara,
Try this solution I tested it on your page and it removes the title on mouse-over but still allows the lightbox to show the title under the image in lightbox.

Best regards,
Mike

Hey Antonio,

Thank you for the inquiry.

You can add the script using action hooks in the functions.php file.

Example:

// custom script: hide the tooltip on the tab click
function ava_custom_script_hide_tooltip()
{
    ?>
    <script type="text/javascript">
        // script goes here
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_hide_tooltip', 9999 );

You can also use the following functions.

// https://developer.wordpress.org/reference/functions/wp_add_inline_script/
// https://developer.wordpress.org/reference/functions/wp_head/

Another option is to add the script directly in a template file such as header.php or footer.php.

Best regards,
Ismael

Hi,

Thank you for the info.

Instead of editing the avia.js file, we just added this script in the functions.php file.

function av_hide_show_tooltips (){ ?>
    <script>
	(function( $ ) {
		$('body').on( "click", function(e) {
			$(this).children('.avia-tooltip').hide();
		});
	})(jQuery);
    </script>
<?php }
add_action('wp_footer', 'av_hide_show_tooltips');

This should hide all active tooltip when you click anywhere in the document.

Best regards,
Ismael

Hi,

Thank you for the update.

Have I placed the additional code correctly? (see screenshot)

You have to add the code below the first block.

if (this.options.event != 'click')
                {
                    this.scope.on('mouseleave', default_tooltips, $.proxy(this.hide_tooltip, this));
                    this.scope.on('click', default_tooltips, $.proxy(this.hide_on_click_tooltip, this));
                } else
                {
                    this.body.on('mousedown', $.proxy(this.hide_tooltip, this));
                }

                this.body.on('click', $.proxy(this.hide_all_tooltips, this));

You have to temporarily disable the Enfold > Performance > File Compression settings after doing the modification.

Best regards,
Ismael

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

Hi,
I believe that I sorted out the z-index, and I noticed that in the code that .toggle(‘slow’); was used, I changed it to .toggle(‘show’); and it seems quicker and the animation of the text wrap less, otherwise I didn’t find another way around that.

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

Best regards,
Mike

Hi,
When you say that you don’t like the text wrapping, I assume that you want the tooltips larger, currently they are 250px, try this css and adjust to suit:

body#top .av-tt-large-width {
    width: 300px;
}

It looks like to place the tooltip over the other numbers you need to set the z-index of the open tooltip parent av-image-hotspot to at least 3.
So this will need to be done with jQuery in the above script, perhaps something like $(this).parent().find(‘.av-image-hotspot’).css({‘z-index’:’3′});
For me the draw open looks like a cool animation, but I think to remove it we need to add and remove opacity to the script, I will try to adjust this later unless you get to it first.

Best regards,
Mike