Hi,

Thank you for the inquiry.

The tooltip text are not visible because the font color is the same as the background. Adding this css code should help.

.avia-tooltip {
    color: orangered;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

Thank you for the clarification.

Try to use this css code to remove the box shadow and borders of the AJAX search container.

#top .avia-search-tooltip {
    box-shadow: none;
    border: none;
}

Again, toggling the file compression settings and purging the cache might be necessary.

Best regards,
Ismael

Hi,
Thanks for the screenshot, to align the images to the bottom try this css:

#top #wrap_all .avia-gallery .avia-gallery-thumb a {
    display: flex;
    flex-direction: column;
}
#top #wrap_all .avia-gallery .avia-gallery-thumb a img {
	margin-top: auto;
	
}

To have the tooltips show below the items edit \enfold\js\avia.js on line 1243 you will find position: 'top', //top or bottom change it to: position: 'bottom', //top or bottom and add this css:

.avia-tooltip .avia-arrow-wrap {
    bottom: 45px !important;
}
.avia-tooltip .avia-arrow {
    top: 15px !important;
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hey fkm,

Thank you for the inquiry.

To adjust the portfolio post type title or label, try to add this code in the functions.php file.

add_filter('avf_ajax_search_label_names','avf_ajax_search_label_names_mod', 10, 1);
function avf_ajax_search_label_names_mod($label)
{
     if($label == 'Portfolio Items') $label = 'New Label Here';
     return $label;
}

You can then use this css code to adjust the styles of the ajax search based on your specifications. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

.av_ajax_search_image {
    border-radius: 0;
}

.av_ajax_search_content {
    top: 10px;
    position: relative;
}

#top div .av_ajax_search_entry:hover {
    background-color: inherit;
}

.avia-search-tooltip .avia-arrow-wrap {
    display: none;
}

Best regards,
Ismael

Hi,

Are you referring to the title popup encircled in the screenshot below? That is a default browser title tooltip which displays if an element has the title attribute and it doesn’t display immediately on hover, only when the user decided to keep the mouse pointer over the image for a few seconds, which probably means that they really like to see the title or the image description. Search engines also like title attributes, so we wouldn’t recommend removing them. But if you still want to proceed, just add the code that @guenni007 provided in the functions.php file.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwEkjNiYfIuFRtd9M?e=g8tUu6

Where do you see the title popup in your site? Please provide a screenshot.

Best regards,
Ismael

Hi,
Thank you for your patience, this was due to this css in your Quick CSS:

.page-id-195 .avia-tooltip.avia-tt {
    display: block!important;
    opacity: 1!important;
}

I commented it out for you, please clear your browser cache and check.

Best regards,
Mike

Hey BrendaSarg,

Thank you for the inquiry.

The hotspot tooltip is supposed to display on hover and automatically hide on mouse leave. Please make sure that the Advanced > Animation > Show Tooltips settings of the hotspot element is set to the first option. And please make sure to upgrade the theme to version 4.9.1.

Best regards,
Ismael

Hey dondela,

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

@media only screen and (max-width: 767px) {
.avia-icongrid-tooltip li article {
    padding: 0 !important;
}
}

Best regards,
Rikard

Hi Ryan,

I edited your element and gave it “custom-social” ID in Advanced > Developer Settings and then added following cdoe to bottom of Quick CSS field in Enfold theme options > General Styling tab

/* Social widget */ 
#custom-social .avia-related-tooltip {
  display: none !important;
}
#custom-social .av-share-box ul li a { 
   font-size: 18px; 
   width: 35px;
}
#custom-social .av-share-box ul li {
   display: inline-block; 
}
#top #custom-social .av-share-box ul { 
    display: flex; 
} 
#custom-social .av-share-box ul li.av-social-link-pinterest { 
   order: 4; 
}
#custom-social .av-share-box ul li.av-social-link-linkedin { 
   order: 3; 
}

Best regards,
Yigit

Hey!

Could you please replace the previous code with following one?

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
  margin-left: 4%;
}
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first,
.responsive #top #wrap_all .slide-entry {
  width: 33%;
}
#top .avia-logo-grid .slide-entry-wrap {
  display: flex;
}
}

@media only screen and (max-width: 480px) {
#avia-icongrid-61def0d63b5fe.avia-icongrid-tooltip li article {
  padding: 4em 0;
}}

That should fix social media links on mobile as well :)

Regards,
Yigit

Hi,

Thank you for that info. Yes, you can fill in the title attribute of the image to show the default browser tooltip. If there is anything else we can help you with, please feel free to open a different thread. We will close this one for now.

Have a nice day.

Best regards,
Ismael

Hi,

Thank you for the update.

The video is displaying correctly on our end as shown in the screenshot below (see private field). Out of the box, there is no option to set a text or tooltip for the portfolio grid items.

To adjust the image size, edit the portfolio grid element, go to the Styling > Grid Settings tab and adjust the Portfolio Grid Image Size to the second option. You will then be able to select a specific thumbnail size. And as much as possible, you should also upload images with the same size and aspect ratio.

Best regards,
Ismael

Hey Ramon,
Thank you for the link to your site, the closest I could come to your request is this script and css that shows the gallery image thumbnail alt tag on mouse-over:

which works ok if the alt tag doesn’t contain too much text, since the image needs to be clickable to view the larger image above if there is too much text you can’t click the image.
If you want to try this, add this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_gallery_tooltip_script() { ?>
    <script>
(function($) {
	setTimeout(function(){
  $("#top.single-product .flex-control-thumbs>li>img").wrap('<div class="alt-wrap"/>');
  $(".alt-wrap>img").each(function() {
    $(this).after('<span class="tooltip">' + $(this).attr('alt') + '</span>');
  });
	},300);
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_gallery_tooltip_script');

and this code in the General Styling ▸ Quick CSS field:

.alt-wrap { 
  display: block;
  position: relative;
  margin: 0px;
}
.alt-wrap span.tooltip {
  opacity: 0;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  line-height: 12px;
  background-color: rgba(0,0,0,0.8);
  transition: all 300ms ease;
  transition-delay: 300ms;
}
.alt-wrap:hover > span.tooltip { 
  opacity: 1; 
  transition-delay: 0s;
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,
To have the avia-tooltip show at the bottom you will need to edit the file at:
\enfold\js\avia.js
on line 1243 you will find:
position: 'top', //top or bottom
change the position to bottom, Then clear your browser cache and any cache plugin.
Then add this css to your Quick CSS:

.avia-tooltip .avia-arrow-wrap {
    bottom: 45px !important;
}
.avia-tooltip .avia-arrow {
    top: 15px !important;
}

Now to change the text color and the background color adjust this css to suit:

.avia-tooltip {
    background: red;
    color: #000;
}
.avia-tooltip .avia-arrow {
	background-color: red;
}

this makes the font black and the background red

Best regards,
Mike