Thanks!
At the end, it works this one:
.av-tt-hotspot,
.av-tt-hotspot .avia-arrow{
background: #fff;
background-color:#fff;
}
I mean, for the tooltip text box.
Cheers!
Hi pjdiddy!
Thank you for using Enfold.
I’m sorry but the map tooltip doesn’t have any animation. It will only show when clicked or close when you click on the x mark. You can play around with the Custom Overlay Color and Color Saturation to change the map’s color scheme. Unfortunately, we won’t be able to help you modify the google map elements. This particular request or modification is more than what we can offer as a support team. Please hire a freelance developer or find a third party plugin that coincide with the theme. For further modifications, please visit Envato Studio or Werkpress.
If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries. Thank you for your understanding.
Cheers!
Ismael
Hi!
How can I change the Hotspots Tooltip BG Color?
Now is black like my general content BG.. but I need it white..
I try with css but I can`t find the right class of the tooltip because it fades in the browser
Thanks!
I followed this thread and was able to change the Vk icon to a Yelp icon in the social media header. (https://kriesi.at/support/topic/use-different-social-icons/). Now, how do I change the tooltip to say “Yelp” because it still says “Vk”.
Thanks.
Hey Munford!
1- Please try de-activating all active plugins and check if editor appears also try switching to one of the default themes.
You can add following code to Functions.php file via FTP
function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');
2- Please add following code to Quick CSS
@media only screen and (max-width: 480px) {
#top #wrap_all .main_color h1 {
font-size: 36px !important;
}}
Regards,
Yigit
Several weeks ago I posted about my alt text words on photos that appear on the computer when loading up for the first time as very very large, like 32pt. I was told the script below would take care of this, but it has not. I don’t get how the alt text gets that big in the first place, and certainly don’t get how to make it smaller…..Any help is appreciated. Thanks. -Ken
function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery(‘a’).removeAttr(‘title’);
jQuery(‘img’).removeAttr(‘title’);
});
</script>
<?php
}
add_action(‘wp_footer’, ‘add_custom_tooltip’);
Hi,
Try adding this at the very end of your theme functions.php file:
function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
jQuery('.avia-gallery a img').each(function(){
jQuery(this).attr('alt', jQuery(this).data('avia-tooltip'));
});
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
Regards,
Josue
Add these…and still checking…
Tabs
Accordion
Gallery
Google Map
Image
Image Hotspot – see hotspots but no tooltips
Partner Logo
Masonry Gallery
Hey!
Have you tried using the wp_nav_menu_items filter? we use that to insert the default Enfold search field:
add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
add_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 );
function avia_append_search_nav ( $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"))
{
global $avia_config;
ob_start();
get_search_form();
$form = htmlspecialchars(ob_get_clean()) ;
$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown">
<a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
</li>';
}
return $items;
}
Cheers!
Josue
My coder @vileworks.com wrote me:
This is the jQuery code I’m using. You can try running (testing) this code on the Enfold demo page if you know how to use the javascript console in Chrome or Firefox: http://kriesi.at/themes/enfold/shortcodes/images-with-hotspots/
$=jQuery;
$(‘.av-hotspot-fallback-tooltip’).hide();
$(‘.av-hotspot-fallback-tooltip-count’).on(‘click’,function(e) {
$(‘html,body’).animate({ scrollTop: $(‘#main’).offset().top },’slow’);
$(‘.av-hotspot-fallback-tooltip’)
.slideUp(500);
});
$(‘.av-image-hotspot’)
.each(function(){
$(this).on(‘click’,function(e) {
var hotspot_number = $(this).index() + 2;
$(‘.av-image-hotspot .av-image-hotspot_inner’).removeClass(‘active’);
$(this).find(‘.av-image-hotspot_inner’).addClass(‘active’);
$(‘.av-hotspot-fallback-tooltip’).hide();
$(‘.av-hotspot-fallback-tooltip:nth-child(‘+hotspot_number+’)’)
.slideDown(500);;
$(‘html,body’).animate({ scrollTop: $(‘.av-hotspot-fallback-tooltip:nth-child(‘+hotspot_number+’)’).offset().top – 100 },’slow’);
});
})
.on(‘hover’,function(){ return false; });
$(‘.av-hotspot-fallback-tooltip-inner p:empty’).remove();
Hi, I was just browsing the Forum. I asked about the width of the tooltip and the guys gave me this so I could make them larger and loose the scrollbar:
<div style=”overflow: auto; width: 175px; height: 175px;”>
Enter the text here that you wish to show in the tooltip</div>
My tooltips also have a heading in bold which link to another page on the site so mine now look like this:
<div style="overflow: auto; width: 175px; height: 175px;"><a href="/services/pagename/"><strong>pagetitle</strong></a>
Enter the text here that you wish to show in the tooltip</div>
I also use the latest version of Enfold which has a fullwidth google map element and works great.
Hope this helps.
H
Hi,
I am hoping for your assistance. I originally wanted to use your Google Maps but I have markers that are overlapping each other and I don’t know how to move them so they all show. As well, the width of the tooltip is very small. I wanted to add some content to it but I get a scrollbar.
So I am trying to work with MapifyPro. Another user posted a question at https://kriesi.at/support/topic/make-mapify-element-full-width/#post-325167 and I thought this was the answer but it did not work for me. Currently I have both your Google map and MapifyPro in the page. I am trying to get it to go full width with no success.
Any help you can supply would be greatly appreciated.
Thanks,
Jacqueline
-
This topic was modified 11 years, 2 months ago by
jbernauer.
Hey hughsieg5!
Yes you can HTML for captions but tooltip would disappear before you can click on the link. Such feature was requested, please vote it here – https://kriesi.at/support/enfold-feature-requests/
Cheers!
Yigit
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.av-share-box .avia-related-tooltip {
display: none!important;
}
Cheers!
Yigit
Hi Yigit,
I actually put back wordpress in english and deleted Enfold and uploaded it again so that now it appears in English.
But is there a way to disable the tooltips anyway?
Kind regards
Chrys
Hi,
I want to use enfold share links at the bottom of the posts. The problem is the tooltips are in french because my wordpress install is in french I guess (?) but the site is in english only so my problem is that the tooltips shows the text “share on Facebook” in french. Is there a way to translate that or even better to remove the tooltips and only have the icons?
Please note that I work on local.
Kind regards
Chrys
That was the ticket fellas. Thanks so much for all of your help. Not sure why the code was not working in the tooltip before? Either way it works now. Many thanks guys!
Hi!
Please add this on Quick CSS or custom.css to fix the google map marker tooltip:
.gm-style-iw {
overflow: auto !important;
}
The mail form field looks the same now. Please check http://fortiusfitness.dk/insider/ and http://fortiuspersonaltraining.dk/insider/. Remove browser cache or hard refresh the page.
Best regards,
Ismael
Hello Ismael,
Thanks for the reply. No worries about people sending nasty comments, they obviously have nothing better to do, plus the instructions given did not work.? It seems that the code that was given before is now gone by aribann. Even when I had the code I did add it to the tooltip field and it just displays the code and does not link directly. I absolutely hate to drag this out or be a pain but it think it is an important feature for the map to be clickable for directions. Is a plugin the way to go here? Just trying to get this working. BTW, you staff has always been great and very responsive. I do appreciate you trying to help me with this issue…..
Hey Munford!
Please remove the code from Avia.js file and following to Functions.php file in Appearance > Editor
function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');
Regards,
Yigit
Hey!
I’m not sure who sent that message to you but I do know it doesn’t come from any of the support team member. Anyway, please edit the google map element then select an address. You can add the link on the Marker Tooltip field.
Cheers!
Ismael
Thanks for this, Josue. Solved, by altering text in the tooltip ;)
It is interesting, you can’t get the issue reproduced on your installation. I get this on every computer I have with chrome installed. I even tried it on a chromium on ubuntu. I also tried it with all chrome extensions disabled.
-
This reply was modified 11 years, 2 months ago by
Steve.
Yes, same issue here. No need of resizing. It just shows the scrollbar. The code Josue suggested removes the scroll bar, but now some of the text in the tooltip “does not fit” into tooltip and is hidden.
Thank you very much for the code. It works as it should!
The only problem I have with this code now is that as soon as I move the mouse from the marker the tooltip closes right away before it allows to click on the links inside the tooltip, so basically this solution makes the tooltip unusable if there are links in it. Sorry, my bad I didn’t think about this.
Is there an option for the tooltip on a marker to stay open until another marker (not just moving the mouse away) is hovered or clicked to allow time to click on the tooltip’s links? Although I’ve seen this done, especially on sites with home listings on a map, I realize that this option requires a lot of additional code. So I guess the easiest option would be for to use the “click” option to open a tooltip on a marker and then when another marker is clicked and the new tooltip opens the previous one closes.
So far I use the code below which allows for the tooltip to open on click and then when the map is clicked it closes all open tooltips.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close(map,marker);
});
What code can I use instead so when a new marker is clicked and a new tooltip opens the previous tooltip closes?
Thank you so much for your help,
George
Hi bakbek!
Thank you for using Enfold.
Please use this on Quick CSS:
.av-hotspot-fallback-tooltip-count {
top: 15px;
right: 15px;
z-index: 10;
}
.av-hotspot-fallback-tooltip-inner {
margin-right: 60px;
}
Best regards,
Ismael
Hi Ismael,
Thank you! On shortcode.js – line 616, I replaced ‘click’ with ‘mouseover’ and the tooltip now opens on hover as I wanted.
However now, when I hover to another marker a new tooltip opens and the tooltip on the previous marker remains open which is fine on a map with just a couple markers. On a map with a bunch of markers however it makes it impossible to look at the info of all markers when all those tooltips remain open.
What is the code that I can add to have the previous tooltip automatically close once I hover to a another marker? I’m pretty bad when it comes to java.
Thank you for your help,
George
1. The problem is I had to set a custom slide duration for the first heading animation slide show and that same timing is getting applied to the second slide show, which requires it’s own unique autorotation
2. If you click on the orange locator icon on the large Google map above my Contact form, you will see the tooltip appears with black type on the white pointer box. If you mouseover the Green phone button below my Contact form, you will see the tooltip appears with white type on a black pointer box. I would like the map locator tooltip to appear as it does on the phone tooltip, with white type on the black pointer box.
Thanks,
Trevor
I am using a the Xing social icon setting under my header layout in the enfold theme options. I change their logo to something I want, and i have put my custom link. But how can i change the tooltip that still comes up for Xing. I want to say something else. that is more specific for my icon and link.
Hi!
If you would like to remove image titles, please add following code to Functions.php file in Appearance > Editor
function add_custom_tooltip(){
?>
<script>
jQuery(window).load(function(){
jQuery('a').removeAttr('title');
jQuery('img').removeAttr('title');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_tooltip');
Image overlays are not displayed on my end currently, only image titles are visible when you hover on images
Cheers!
Yigit
Hi!
I don’t think its been changed in a long time. Looking through the avia.js history I don’t see any notes about the tooltip getting updated in the past 6 months.
The undefined error sounds like a general js error. Typically its an issue with another plugin or an incomplete/broken javascript file.
If you download the 3.0 update that *just* went live on ThemeForest it has a fix I added to change the js version of avia to 3 which will clear any previous cache on the avia.js file. Or if you want to do that manually, first re-upload the whole js folder and then in your functions.php file find the avia.js being enqued and change the 2 to a 3 in that function.
wp_enqueue_script( 'avia-default', $template_url.'/js/avia.js', array('jquery'), 3, true );
That 3 will be a 2 on your version but its a 3 in version 3.
Best regards,
Devin