Hey,

Your text is not wrapped inside Span tags. Please wrap the text you would like to display as tooltip in Span tags as following

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

Cheers!
Yigit

Hey sensiblekaren,
Sorry for the late reply, do you mean that you are trying to use the “Image Caption” of each partner to show two lines?

On my localhost I was able to create two lines with this css:

.avia-tooltip.avia-tt .inner_tooltip {
	display: table-caption;
	text-align: left;
}

what this does is create a new line after each word, so for the name as the first line I used a non-breaking space like this
Miss One CEO


Please note that WordPress will try to strip the non-breaking space each time you edit the element. Unfortunately this element is only meant to show the tooltip as one line.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the mockup and link, so for your single posts we will first change the social share buttons into small buttons.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.single-post .av-share-box .avia-related-tooltip,
#top.single-post .av-share-box h5.av-share-link-description.av-no-toc {
  display: none !important;
}
#top.single-post .av-share-box {
    width: 200px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: absolute;
    right: 50px;
}

#top.single-post .av-share-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
}

#top.single-post .av-share-box .av-share-link {
   width: 30px!important;
   height: 30px!important;
   margin: 0 10px 0 0;    
}

#top.single-post .av-share-box .av-share-link a {   
   border:0px solid #000;
   padding: 0;
}

#top.single-post .av-share-box .av-share-link a:hover {
  background-color: #000!important;
  transition: all .35s ease;
}

#top.single-post .av-share-box .av-share-link a:before {
  color:#333;
  transition: all .5s ease;

}

#top.single-post .av-share-box .av-share-link:hover a:before {
  color:#fff;
  transition: all .35s ease;
}

Then we will move it to under your featured image, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function($) {
  $(document).ready(function(){
     $('.single-post .av-share-box').detach().insertBefore('.blog-meta');
  });
 })(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

Then clear your browser cache and check.

Best regards,
Mike

Hey,

Please add following line to your content (using Code Block element or text tab on Text Block element) and adjust it as needed

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

Then add following code to Enfold theme options > General Styling > Quick CSS field

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

That should be it :)
Best regards,
Yigit

Hey,

Thanks for contacting us and sorry for the late reply!

– If you are not using a child theme, please switch to child theme – https://kriesi.at/documentation/enfold/child-theme/
– Add the code posted here in functions.php file of your child theme – https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb
– Go to /enfold/config-templatebuilder/avia-shortcodes/team/ and copy team.php file to your child theme inside /shortcode/ folder
– Open team.php file on your child theme and find following line

$output.= "<a rel='v:url' {$tooltip} {$target} class='{$social_class} avia-team-icon ' href='" . esc_url( $social['attr']['link'] ) . "' {$display_char}>";

and change it to following

$output.= "<a aria-label='Here goes your label' rel='v:url' {$tooltip} {$target} class='{$social_class} avia-team-icon ' href='" . esc_url( $social['attr']['link'] ) . "' {$display_char}>";

Best regards,
Yigit

Hi,
Sorry for the late reply and thanks for the link to your page, to hide the tool tip popup, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.avia-related-tooltip.avia-tt {
	opacity: 0 !important;
}

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

Best regards,
Mike

Hey studiovene,

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

.avia-icongrid-tooltip li article:before {
    padding-top: 50%;
}

Best regards,
Rikard

Hi,

Thank you for following up.

You might be looking on a cached version of the page with the old script. Please try to purge the plugin cache and remove the browser history, then check the page again.

You might also have to adjust the hard coded height value in the js > avia.js, line 1619.

default: pos1 = (offset.top + (element.outerHeight() / 2)) - (350 / 2); break;

Replace 350 with a lower value to move the tooltip upwards.

Best regards,
Ismael

Hi,

Thank you for info.

The alignment issue occurs because the script fails to get the actual height of the tooltip — the height value is always set to 0. To fix the issue temporarily, we modified the js > avia.js file and around line 1619, we hard-coded the height value.

default: pos1 = (offset.top + (element.outerHeight() / 2)) - (350 / 2); break;

We will forward this thread to our channel so that we could provide a fix in the next patch.

Best regards,
Ismael

Hey Tobias,

Thank you for the inquiry.

The vertical position of the tooltip is probably off because it contains images. For some reason, the space taken by images are not taken into consideration when calculating the top position of the tooltip. Does it work correctly when the images are removed?

Best regards,
Ismael

Hey Katroaka,
To change the hotspot tool tip to transparent with red text please try this css:

#wrap_all #main .av-display-hotspot .av-permanent-tooltip-single,
#wrap_all #main .avia-arrow {
    background-color: rgba(255, 255, 255, 0) !important;
}
#wrap_all #main .av-display-hotspot .inner_tooltip p {
	color: red !important;
}
#wrap_all #main .avia-tooltip.av-tooltip-shadow, 
#wrap_all #main .avia-tooltip.av-tooltip-shadow .avia-arrow {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0) !important;
}

Expected results:

Please note that I used red text in this example so you could see the text in the screenshot, if your site or image is dark you can change the color to white, as in your request.
After applying the css, please clear your browser cache and check.

Best regards,
Mike