Hey tinohannes,

Thank you for the inquiry.

You can use this css code to adjust the style of the image tooltip.

.avia-tooltip {
    position: absolute;
    z-index: 9999999;
    padding: 12px;
    margin-top: -18px;
    margin-left: -4px;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    width: 140px;
    border-radius: 2px;
    text-align: center;
}

Default background color is set to rgba(0, 0, 0, 0.8).

Best regards,
Ismael

Hi,
For number two you are hiding the tooltips in your child theme with this css:

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

removing this will solve.

For number three the video on both pages are working for me in-page, I tested on Chrome, Firefox, & Edge on Windows 10

Best regards,
Mike

Hi,

Thanks for the update. Please try this CSS as well to change the font family:

#about.alternate_color h1 .tooltipsall {
  font-family: monospace;
}

Best regards,
Rikard

Hey hitrev,
Thank you for the link to your site and the video, I didn’t find the orange “.tooltipsall” color in your css, it was black, but I did find the green hover:

but you will notice that your links are inside a H1 tag:

so a css rule of just “.tooltipsall” is pretty weak, heading tags typically have a higher specificity than this.
So to correct try forming your rule like this and add manually:

#about.alternate_color h1 .tooltipsall {
	color: red;
}
#about.alternate_color h1 .tooltipsall:hover {
	color: yellow;
}

Your plugin options may work in a plain text element, but I believe even then the paragraph tag “p” is effected by a second class for the “.main_color” or the “.alternate_color” classes, so in the end a single class “.tooltipsall” doesn’t have the specificity needed. I hope this makes sense.

Best regards,
Mike

Hey Patrick,

Thank you for the notification.

We will post the changes as soon as possible. For now, you can check them below.

feature: ALB columns reverse or individual resort order when switching to fullwidth on mobile devices
feature: ALB gridrow reverse or individual resort orderof cells when switching to fullwidth on mobile devices
feature: theme option “Transparency Menu Color On Hover”
feature: ALB video element option to show fullscreen button for HTML5 videos

fixed: missing comma in CSS for mobile and svg makes svg huge
fixed: button CSS top border issue on :active – removed !important in button.css
fixed: Option Remove query string from static resources breaks invalidation of post css files – option willl be ignored for these files
fixed: ALB Textblock custom element lockable custom CSS class missing
fixed: fullwidth submenu alignment ignored for mobile button
fixed: undefined constant THEMENAME in Mailchimp Newsletter Signup widget
fixed: typography font size not applied in block editor in frontend
fixed: ALB masonry gallery lightbox title not corresponding to options settings for flexible masonry
fixed: ALB magazine category sort buttons break frontend when no entries are found
fixed: svg logo broken when svg tag in multiple lines
fixed: svg logo not displayed for non logged in users
fixed: italien translation breaking selectbox in ALB Image Hotspot tooltip location

tweak: add missing schema.org markup to section background videos and slideshow videos
tweak: accessibility support:

added: Accessibility Tab to Theme Extensions Page
added: tab key access support to main menu with submenus and megamenu
added: visual appearance with keyboard access to menus (focus now equivalent to mouse hover effects)
added: attributes role=”menuitem” tabindex=”0″ to menu items
added: started support for plugin “One Click Accessibility” ( https://wordpress.org/plugins/pojo-accessibility/ )
added: started support for plugin “WP Accessibility” ( https://wordpress.org/plugins/wp-accessibility/ )
tweak: remove “:” when empty label text from contact form emails
tweak: extended date filter to “last xxx days/weeks/month/years” for ALB elements:
Blog
Magazine
Masonry
Portfolio
Post Slider
Accordion Slider
Featured Image Slider
added: filter ‘avf_social_media_icon_display_name’ – change tooltip display name of icon
added: filter ‘avf_form_mail_label’ – allows to change label text on E-Mail of a contact form
added: filter ‘avf_wp_accessibility_outline_width’ – change hardcoded plugin value for focus caret
added: filter ‘avf_wp_accessibility_outline_style’ – change hardcoded plugin value for focus caret

Following elements have been updated to support post-css file:

Dropcap 1 (Big Letter)
Dropcap 2 (Colored Background)
Fullwidth Sub Menu
Grid Row + Grid Cells
OSM – Leaflet Map
Post Metadata
Search
Social Buttons
Tabs
Team
Textblock
Timeline
Video
Updated: LayerSlider Version 6.11.9

updated: French language files fr_FR (version 4.8.6.4, provided by comkapi – (Email address hidden if logged out) )
updated: Dutch language files nl_NL (version 4.8.7 provided by EZWebdesign – Roger Hoen )
updated: Italian language files it_IT (version 4.8.7, provided by BigBatT – (Email address hidden if logged out) )
updated: sync all language files version 4.8.7

Best regards,
Ismael

Hey WebDevDept,

Thank you for the inquiry.

The tooltip text are covering the hotspots, which might be due to the html tags that were added in the hotspot title field. To fix it, try to use this css code.

.av-hotspot-blank .av-hotspot-container .av-image-hotspot_inner {
    z-index: 99999999;
}

Best regards,
Ismael

Hi,
Thank for the gif, the reason the page turned gray was because the search field was being moved 1322px from the left which is off your page, I didn’t find what was moving it but you site acts strangely in the background. You also had an issue with the menu and search links overlapping. I adding this css to your Quick CSS and it works for desktop but you may need to fine-tune it for mobile.

.html_burger_menu_active #top #wrap_all #header #avia-menu .av-burger-menu-main.menu-item-avia-special > a{
	width: 58px;
	position: fixed;
	right: 20px;
	top:40px;
}

.html_burger_menu_active #top #wrap_all #menu-item-search > a {
	height: 56px;
	top: 100px;
	position: fixed;
	right: 20px;
	display: inline;
}
#menu-item-search .avia-search-tooltip.avia-tt {
	left: -136px!important;
	top: 120px!important;
}

Please clear your browser cache and check.
I see that you are using Elementor so I wonder if that is the issue with your site acting strangely in the background, typically other page builders conflict with Enfold.

Best regards,
Mike

Hi,

Thank you for the update.

Please remove the old Enfold 4.8.3 from the themes folder to rule out any conflict, then replace the content of the themes/enfold/config-templatebuilder/avia-shortcodes/image_hotspots/image_hotspots.php with the following code.

// https://pastebin.com/nJhGCKqf

It is not working correctly because the value in the Posizione Tooltip dropdown option is incorrect.

<optgroup label="Below">
<option value="av-tt-pos-left av-tt-align-bottom">In basso a sinistra</option>
<option selected="selected" value="av-tt-pos-right av-tt-align-bottom">In basso a destra</option>
<option value="av-tt-pos-below av-tt-align-centered">In basso  al centro</option></optgroup>

Best regards,
Ismael

Hi,

Thank you for the clarification.

Adding the following css code should adjust the background of the tooltip container from black to transparent, which should remove the black bar.

.ui-wordpress-tooltip-pro {
    background-color: transparent !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

It seems to work correctly when the tooltip link (GIF TEST) is in the same line. Please check the screenshot below.

Screenshot: https://postimg.cc/SXsCRMDz

We inserted a few letters before the link to completely push it in the second line.

Best regards,
Ismael

Hi,

Thank you for the update.

Have you tried enabling the Advanced > Responsive Settings > Hotspot on mobile devices option? This should set the tooltip content to always display below the hotspot image, and so users will not have to tap or click the hotspot to see the tooltip content. It could also act as a support in case users are having difficulty accessing the hotspot tooltip.

You can also adjust the size of the hotspot if necessary.

@media only screen and (max-width: 990px) {
.responsive .av-image-hotspot {
    height: 50px;
    width: 50px;
    line-height: 50px;
    font-size: 22px;
}
}

Best regards,
Ismael

Hi,

Thank you for the update.

It seems to be working correctly on our end. The tooltip gets the correct class names, both av-tt-pos-left/right and av-tt-pos-below. Please post the site URL in the private field so that we could check the issue.

Screenshot: https://imgur.com/KMwxw3F

Best regards,
Ismael

Hey,

Thanks for contacting us!

Could you please edit your Image with Hotspots element and choose to show tooltips on mouse hover in Advanced > Show Tooltips and check if that helps? Your first element seems to be working fine :)

Best regards,
Yigit

Hi,
Glad to hear, I had not tested on mobile because I was not sure if you would like this, please try this css instead for all sizes:

@media only screen and (max-width: 767px) { 
	#top.postid-3431 .avia-tooltip.avia-tt {
	top: 370px !important;
    left: 30% !important;
    background-color: transparent !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
	#top.postid-3431 .avia-tooltip.avia-tt {
	top: 370px !important;
    left: 26% !important;
    background-color: transparent !important;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
	#top.postid-3431 .avia-tooltip.avia-tt {
	top: 475px !important;
    left: 29% !important;
    background-color: transparent !important;
}
}
@media only screen and (min-width: 1440px) { 
	#top.postid-3431 .avia-tooltip.avia-tt {
	top: 675px !important;
    left: 31% !important;
    background-color: transparent !important;
}
}

feel free to fine-tune for certain sizes if you wish and after applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience, currently there is a caption for the lead gallery image that is hidden, #top .avia-gallery .avia-gallery-caption
but when you hover over the thumbnails the lead image container is not replaced it is overlayed with a larger thumbnail and the caption is not used. So I’m not seeing a good way to change this, I did come up with this css that sets all of the tooltips to the same location so they look like captions on hover, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.postid-3431 .avia-tooltip.avia-tt {
	top: 675px !important;
    left: 31% !important;
    background-color: transparent !important;
}

you could also add font size and color rules if you wanted, please see the screenshots in the Private Content area.

Best regards,
Mike

Merhabalar,

1- Please add following code to Quick CSS field in Enfold theme options > General Styling tab

.page-id-1679 .avia-tooltip.avia-tt {
    background-color: #4274a4;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.page-id-1679 .avia-tooltip.avia-tt .avia-arrow-wrap {
    display: none;
}

2- Lutfen o gorselin oldugu column elementini duzenleyip Advanced > Developer Settings sekmesinden ozel bir ID verin (assagidaki ornekte “alt-margin”) sonra assagidaki kodu Quick CSS alanina ekleyin

#alt-margin { margin-bottom: -90px; }

Best regards,
Yigit

Hey jaimemerz,

Thank you for the inquiry.

You can add the following script in the functions.php file to make the document scroll to the position of the fallback tooltip when a corresponding hotspot is clicked.

add_action("wp_footer", function() {
?>
<script>
(function($) {
    $(".av-image-hotspot").on("click", function() {
        var number = $(this)[0].classList[2];

        $('html, body').animate({
            scrollTop: $(".av-hotspot-fallback-tooltip." + number).offset().top
        }, 500);
    });
})(jQuery);
</script>
<?php
}, 999);

Please make sure to copy the code directly from the forum. Let us know how it goes.

Best regards,
Ismael