Hi!
Please replace the code that I gave you with this:
$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="search-text">'.__( 'Search', 'avia_framework' ).'</span></a></li>';
This will make the “Search” string translatable. If the translation is not automatic when you switch language, please use this plugin to translate the string: http://wordpress.org/plugins/codestyling-localization/
Please hire a freelance developer if you want to integrate the Choices’ or the Propulsion’s search form on Enfold.
You can set the facebook account on Enfold (En) and Enfold (Fr) separately. Switch between languages when you are on the wp dashboard.
Cheers!
Ismael
Hi Marco!
Can you post a link to your product/shop page please? Afaik Enfold doesn’t display a tooltip at all and all product images have an alt text and thus it should be displayed if a tooltip pops up.
Best regards,
Peter
There does seem be enough space next to or between logo and mobile menu trigger button to include the magnifying glass icon which normally triggers the search box.
I have seen this asked many times though there doesn’t appear to be universal solution.
I think a good solution to this is to include a search button at the top of the mobile slide-out menu which can trigger the search form as it does in the non-mobile menu like below.
How can this be added?
Thank you for help on this
<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown">
<a data-av_iconfont="entypo-fontello" data-av_icon="" aria-hidden="true" data-avia-search-tooltip=" <form action="http://www.kaua-i.com/" id="searchform" method="get" class="av_disable_ajax_search"> <div> <input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello" /> <input type="text" id="s" name="s" value="" placeholder='Search' /> </div> </form>" rel="nofollow" href="?s=" style="padding-right: 0px; padding-left: 13px; height: 88px; line-height: 88px;"></a>
</li>
Hi Yigit,
It works perfectly again, I owe you many thanks
Regards Intosuwo
Hi intosuwo!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
.page-id-734 .avia-tooltip { background: rgba(0, 255, 255, 0.8); color: red; width: 180px; }
.page-id-734 .avia-tooltip .avia-arrow { background: rgba(0, 255, 255, 0.8); }
Cheers!
Yigit
I want to customize the width, background, and the color of the tooltip on my social icons (av_font_icon icon=” font=’entypo-fontello) one single page.
Wich CSS rules do i need? the page-id is .page-id-734
Intosuwo
Hi!
You should choose to display 5 columns and logo slider http://i.imgur.com/3JoJK6A.jpg and after adding logos to your element, please click on them to add captions so that tooltip will be shown on hover
Cheers!
Yigit
Hi!
Oh my bad, i thought you would like to remove image overlay. Please remove the code i have posted in my previous post and refer to Josue’s post here https://kriesi.at/support/topic/how-to-remove-tooltips/#post-224464
Regards,
Yigit
Hi Imburr!
Anything that has if(!function_exists('avia_logo')) preceding the start of the function can be replaced by a child theme. You would need to re-do the setup of the function.
The title attribute however I don’t view as needed on a logo. The alt text telling screen readers and the like saying that this is ‘site name’ but the title tends to just aggrivate users since it appears as a tooltip for users who can already plainly see a logo with the identical information.
For #2, you can remove the theme function and then add your own function, something like:
remove_action( 'ava_main_header' , 'avia_woocommerce_cart_dropdown', 10)
then you would duplicate that same function and then add it back in the same way its added in that file (but all in your functions.php file).
#3 you add the same thing your child functions.php.
Best regards,
Devin
Hey!
Where are this tooltips coming from? is that a third-party plugin?
Regards,
Josue
This reply has been marked as private.
Hey!
They look the same. Anyway, there is a problem with the html rendering. It looks like this:
<p style="text-align: left;"><span class="av_font_icon avia_animate_when_visible av-icon-style- B1 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#7bb0e7; border-color:#7bb0e7;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>Precisão</p>
<p><abbr rel="tooltip" title="Define a margem de exatidão no diagnóstico médico. Deve estar acima de 95%.">[?]</abbr><span class="av_font_icon avia_animate_when_visible av-icon-style- B2 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#dadada; border-color:#dadada;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span> Incerteza <abbr rel="tooltip" title="Define a margem de imprecisão no diagnóstico médico. O limite máximo é de 5%.">[?]</abbr>
</p>
The Text Block is generating another paragraph tag which I suspect is cause by space on the Text Editor. Please check. You can replace it with this:
<p style="text-align: left;"><span class="av_font_icon avia_animate_when_visible av-icon-style- B1 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#7bb0e7; border-color:#7bb0e7;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>Precisão<abbr rel="tooltip" title="Define a margem de exatidão no diagnóstico médico. Deve estar acima de 95%.">[?]</abbr><span class="av_font_icon avia_animate_when_visible av-icon-style- B2 avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#dadada; border-color:#dadada;"><span class="av-icon-char" style="font-size:25px;line-height:25px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span> Incerteza <abbr rel="tooltip" title="Define a margem de imprecisão no diagnóstico médico. O limite máximo é de 5%.">[?]</abbr>
</p>
Cheers!
Ismael
This reply has been marked as private.
Hi!
You can try to replace this line in enfold/js/avia.js:
new $.AviaTooltip({"class": 'avia-search-tooltip',data: 'avia-search-tooltip', event:'click', position:'bottom', scope: "body", attach:'element'});
with
new $.AviaTooltip({"class": 'avia-search-tooltip',data: 'avia-search-tooltip', event:'click', position:'bottom', scope: "#header", attach:'element'});
This change will change the click event scope and maybe fix your issue.
Best regards,
Peter
Hey!
The icon box link tooltip issue was fixed in 2.5.x, please update your theme to the latest version.
Regards,
Josue
Hi!
Could you elaborate on this ‘tooltip system’? a link to a Blank page would be helpful too.
Cheers!
Josue
Hey!
I’m not really sure I understand the issue. That is a basic internet/browser interaction between the site you are viewing and the user. Removing alt data, tooltips etc has not only a negative seo impact but it makes it non-friendly for screen readers as well.
The online docs has an entry for changing the default blog title: http://kriesi.at/documentation/enfold/replace-the-default-blog-latest-news-title/
Regards,
Devin
Hi,
Thanks. But my problem is different.
The tooltip sytem works normaly in Standard Model, but in the Blank Model there are some align problems.
So I assume the problem is in some STANDARD CLASS, applied differently in the Blank Model.
Thanks
I thought that the addition to the avia.js script would remove the tooltips but they continue to appear where they shouldn’t. When I hover over the icons, you can view the complete hyperlink. How can I remove that from displaying?
In fact it”s not just over icons. It’s everywhere I hover. Ugh.
Thanks.
-
This topic was modified 11 years, 11 months ago by
eswyt.
Hey Ignazio!
There is no shortcode for text tooltip however maybe this plugin will help: http://wordpress.org/plugins/bubble-tooltip/
You can also search for tooltips tutorial here: http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
Best regards,
Ismael
Is there such a thing? I can’t find it..
I would like to apply a tooltip to a line of text..
Thanks!
Hi!
You can wrap the “Search” text into a span and hide it like:
$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 style="display:none;">Search</span></a></li>';
Best regards,
Peter
Hey!
Please refer to Josue’s post here https://kriesi.at/support/topic/how-to-remove-tooltips/#post-224464
Please add following code to Quick CSS and adjust as needed
.page-id-982 .team-member-name { font-size: 15px; }
You should right click on Chrome or Firefox and click Inspect Elements to find page ID then change the ID in custom CSS code to match your page ID
Best regards,
Yigit
Hey!
Please try this code instead:
.avia-tooltip {
margin-top: 160px;
}
Regards,
Peter
Hey AssuranceOgilvy!
Please edit functions-enfold.php, find this code on line 69:
$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').'></a></li>';
Replace it with:
$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="search-text">Search</span></a></li>';
Add this on Quick CSS:
.search-text {
margin-left: 10px;
font-size: 12px;
}
Regards,
Ismael
Thanks, that worked! Sorry for the delay.
Hi,
I add the following lines on the quick CSS as you said.
.avia-tooltip {
top: 400px !important;
}
Unfortunately, it looks great for the first line of my images, but it goes worst for the lines 2, 3 and so on.
You can have a look at it here : http://www.gstarevents.com/references/
Waiting for your reply,
Thanks a lot,
My best regards,
ALexandra
Hi pgps!
Open up engold/functions-enfold.php and replace:
$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').'></a></li>';
with
$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').'>Search</a></li>';
Best regards,
Peter