Hi Philipp,

Tooltips are hidden by the following custom CSS code

/* Hide tooltip */
.avia-tooltip {
	display: none !important;	
}

I commented it out and that helped.

Please review your website.

Best regards,
Yigit

Hey Tom,

I reported the issue to our developers. Issue should be fixed in upcoming version.

As a temporary solution, I added the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling

/* Temporary CSS fix for TEC styling */
:root{
    --tec-color-text-events-title-day:var(--tec-color-text-events-title);
    --tec-color-text-events-title-latest-past:var(--tec-color-text-events-title);
    --tec-color-text-event-title-list:var(--tec-color-text-events-title);
    --tec-color-text-events-title-month-multiday:var(--tec-color-text-events-title);
    --tec-color-text-events-title-widget-list:var(--tec-color-text-events-title);
    --tec-color-text-secondary-event-date-month:var(--tec-color-text-secondary-event-date);
    --tec-color-text-secondary-event-date-month-mobile:var(--tec-color-text-secondary-event-date-month);
    --tec-color-text-day-of-week-month:var(--tec-color-text-secondary);
    --tec-color-day-marker-month:var(--tec-color-text-primary);
    --tec-color-day-marker-month-hover:var(--tec-color-text-primary-hover);
    --tec-color-day-marker-month-active:var(--tec-color-text-primary-active);
    --tec-color-day-marker-current-month:var(--tec-color-day-marker-month);
    --tec-color-day-marker-current-month-hover:var(--tec-color-day-marker-month-hover);
    --tec-color-day-marker-current-month-active:var(--tec-color-day-marker-month-active);
    --tec-color-day-marker-past-month:var(--tec-color-text-primary);
    --tec-color-day-marker-past-month-hover:var(--tec-color-day-marker-past-month);
    --tec-color-day-marker-past-month-active:var(--tec-color-day-marker-past-month);
    --tec-color-text-day-of-week-week:var(--tec-color-text-secondary);
    --tec-border-radius-month-multiday:9.5px;
    --tec-color-border-secondary-month-grid:var(--tec-color-border-secondary);
    --tec-color-border-active-month-grid-hover:var(--tec-color-border-active);
    --tec-color-background-month-grid:transparent;
    --tec-color-background-tooltip:var(--tec-color-background);
    --tec-color-text-events-bar-input:var(--tec-color-text-primary);
    --tec-color-text-events-bar-input-placeholder:var(--tec-color-text-secondary);
    --tec-opacity-events-bar-input-placeholder:var(--tec-opacity-default);
    --tec-color-border-events-bar:var(--tec-color-border-secondary);
    --tec-color-background-events-bar:var(--tec-color-background);
    --tec-color-background-view-selector:var(--tec-color-background-events-bar);
    --tec-color-background-view-selector-tabs:var(--tec-color-background-view-selector);
    --tec-color-background-view-selector-list-item-hover:var(--tec-color-background-secondary);
    --tec-color-background-subscribe-list-item-hover:var(--tec-color-background-secondary);
    --tec-color-text-view-selector-list-item:var(--tec-color-text-primary);
    --tec-color-text-view-selector-list-item-hover:var(--tec-color-accent-secondary-hover);
    --tec-color-background-search-container:var(--tec-color-background-events-bar);
    --tec-color-text-events-bar-submit-button:var(--tec-color-background);
    --tec-color-text-events-bar-submit-button-active:var(--tec-color-text-events-bar-submit-button);
    --tec-color-text-events-bar-submit-button-hover:var(--tec-color-text-events-bar-submit-button);
    --tec-color-background-events-bar-submit-button:var(--tec-color-button-primary);
    --tec-color-background-events-bar-submit-button-hover:var(--tec-color-button-primary-hover);
    --tec-color-background-events-bar-submit-button-active:var(--tec-color-button-primary-active);
    --tec-color-icon-events-bar:var(--tec-color-icon-primary);
    --tec-color-icon-events-bar-active:var(--tec-color-icon-active);
    --tec-color-icon-events-bar-hover:var(--tec-color-icon-hover)
}

You can remove in the version after 5.4.1

Edit: After checking your other thread, I realized we must hear back from our devs. As I mentioned in the other thread, TEC styling should inherit Enfold theme options.

Best regards,
Yigit

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

Hi,
Thanks for your patience, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function search_for_mobile_sidebar_header() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
	(function($){
	var width = $(window).width();
	var search = $('<li id="menu-item-search" class="mobile-search menu-item menu-item-search-dropdown menu-item-avia-special" role="menuitem"><a aria-label="Search" href="?s=" rel="nofollow" data-avia-search-tooltip="<form role=&quot;search&quot; action=&quot;https://your-domain.com/&quot; id=&quot;searchform&quot; method=&quot;get&quot; class=&quot;&quot;><div><input type=&quot;submit&quot; value=&quot;&quot; id=&quot;searchsubmit&quot; class=&quot;button avia-font-entypo-fontello&quot; /><input type=&quot;text&quot; id=&quot;s&quot; name=&quot;s&quot; value=&quot;&quot; /></div></form>" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" style=""><span class="avia_hidden_link_text">Search</span></a></li>');
	if (width <= 767) {
	$(search).insertBefore('.main_menu');
	} else {}
	})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'search_for_mobile_sidebar_header');

Then add this css to your child theme stylesheet or the theme option Quick CSS:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #menu-item-search.mobile-search {
top: 0;
height: 80px;
right: 50px;
display: inline-block;
position: absolute;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

• This reply was modified 2 years, 11 months ago by Mike. Reason: corrected quotes in code

Hi,

Thank you for the links.

Did you add the following css code somewhere? It sets the font size to 15px by default on pages.

body, body .avia-tooltip {
    font-size: 15px;
}

The css below is the default style.

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: justify;
    font-size: 1.15em;
    line-height: 1.7em;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

To fix the issue, you have to adjust the first css rule and make sure that it is the same as the default style.

Best regards,
Ismael

Hi,
Thank you for your patience when I look at the links in your footer I see the social links are a “share box”.
I assume that you added this by using the “social buttons” element in your footer page, this element is a “share box” and not a social profile link.
You can copy the social profile code from your header and add in a code block element or you can use the icon elements to create your own social links.
Please see this thread
If you like the layout you currently have and just want to change the links for your footer page “share box”, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_share_box_links_to_social_profile_links() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
	var facebook = "https://facebook.com";
	var linkedin = "https://linkedin.com";
	var instagram = "https://instagram.com";
	var youtube = "https://youtube.com";
  $("#footer-page .av-share-box-list").each(function(){
  $(this).find(".av-share-link.av-social-link-facebook a").attr("href", facebook);
  $(this).find(".av-share-link.av-social-link-linkedin a").attr("href", linkedin);
  $(this).find(".av-share-link.av-social-link-instagram a").attr("href", instagram);
  $(this).find(".av-share-link.av-social-link-youtube a").attr("href", youtube);
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'change_share_box_links_to_social_profile_links');

and adjust the social links to suit.

Best regards,
Mike

Hi Chrilles,

Thanks for contacting us!

Main color background color seems to be set to transparent, hence the issue. Please add following code to Quick CSS field in Enfold theme options > General Styling tab

.avia-tooltip, .avia-tooltip .avia-arrow {
  background-color: white;
}

Best regards,
Yigit

Hey hmsvictory,

Thank you for the inquiry.

Are you referring to the title attribute popup? Please note that the title attribute is important for search engines and the tooltip is a default browser feature, so we don’t recommend removing it. But if you want to proceed and remove the attribute, try adding in the functions.php file any of the script or code provided in the following threads.

// https://kriesi.at/support/topic/issue-with-lightbox-image-titles/#post-1356119
// https://kriesi.at/support/topic/image-names-appearing-on-hover/#post-1355003
// https://kriesi.at/support/topic/how-to-remove-filename-which-shows-when-mouse-arrow-is-on-a-picture/#post-1324132

Best regards,
Ismael

Hi,

Thank you for the update.

The recommendation above will actually disable the tooltip and directly open the hotspot link on tap. You will also have the option to add the link directly inside the tooltip content but as describe in the option, the content will display below the hotspot image. Did you try it?

Best regards,
Ismael

Hi,

Thank you for the update.

Have you tried decreasing the animation duration (300) to 200 or lower value? You can also replace the animation function with css to instantly hide the tooltips.

 $('.avia-tooltip').css({
                        opacity: 0,
                        display: 'none'
                    });

Let us know if this helps.

Best regards,
Ismael

Hey armourcreative,

Thank you for the inquiry.

There is an option to show the hotspot tooltip info below the hotspot image on mobile view. Please go to the Advanced > Responsive toggle and enable the Hotspot on mobile devices option.

Best regards,
Ismael

Hey domchocolate,

Thank you for the inquiry.

Adding the following script in the functions.php file might help. The script should hide the tooltip when switching tabs.

// custom script: hide tooltip on tab click
function ava_custom_script_hide_tooltip()
{
    ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('.av-tab-section-tab-title-container').on('click', function(event) {
                    $('.avia-tooltip').animate({
                        opacity: 0,
                        display: 'none'
                    }, 300);
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_hide_tooltip', 9999 );

Best regards,
Ismael