Topic: Tooltip Positioning for Menu Icons

posmaymedia
April 22, 2024 at 10:09 am

Hi,

Here is my demo site: https://shop.posmay.com/

I’ve just added some tooltips for the icons in the menu using the CSS code and instructions outlined in this post. https://theadminbar.com/creating-animated-tooltips-in-generateblocks/

When I hover over the icons, the tooltips show up, but the positioning is wrong. How can I get the tooltip to appear above the relevant icon – Account, Wishlist, Quote List?

I added the Account, Wishlist, Quote List icons using elements.

And how can I add a tooltip to the shopping cart icon and the search icon as well?

Appreciate your support and help with this. Let me know if you need any additional information.

Thanks,
Sean
Ying
April 22, 2024 at 10:15 am

Hi there,

Set the gb buttons’ position to relative in the layout panel.

Let me know if this helps!
posmaymedia
April 22, 2024 at 11:54 pm

Hi Ying,

Thank you, that worked!

And is there a way to add those tooltip to the cart and search icons? Those I have not added using Elements, but with GP via customiser. Is there a way I can add those icons to the nav using Elements without loosing their functionality?

That functionality being that if a product is in the cart, then the cart icon shows the cart total next to the icon and if the user hovers over the icon, it drops down and lets them click through to View Cart or Checkout. I really like that functionality and don’t want to loose that. And the search icon brings up the lightbox search bar, which I also really like.

Really appreciate your help and guidance.

PS: GP and GB support is truly the best! You guys are all rockstars! This is my first post in the forum, but I’ve learned so much and received so much support by just reading other support posts.
David
April 23, 2024 at 3:43 am
Hi there,

The search modal
Use a GB button with a # HREF and a attribute of: data-gpmodal-trigger="gp-search"

Then use this PHP to unhook the themes search icon button:
```
remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger', 99 );
```
Tbe cart is a little more complicated.
See Yings reply here on how to create a Shortcode to output the cart icon and menu:

https://generate.support/topic/woocommerce-mini-cart-position/#post-100011

In this line:

<span class="menu-bar-item wc-menu-item %2$s %3$s">

You can add your class and tooltip attributes.
posmaymedia
April 23, 2024 at 1:52 pm

Hi David,

Thank you for your reply. Wow, exceptional support and explanation. I’ve managed to get it to work. Just have one minor issue and a question.

The issue is even after adding this code

remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger', 99 );

to my functions file, the theme based search icon is still showing up in the menu. If I uncheck the “Enable navigation search modal” option in customerizer, then the search icon disappears, but the search model feature stops working. Am I missing something?

Then my other question is … I’ve managed to add the cart icon and and mini dropdown cart using the shortcode, however when I hover over the cart with my mouse, a different type of “tooltip” appears that says “View your shopping cart”. See screenshot here: https://www.dropbox.com/scl/fi/17alrnxukzyornl9nl460/Screenshot-2024-04-23-at-23.45.47.png?rlkey=jw81zf9qfzt9w4n2qboil0je2&dl=0

How can I remove that tooltip? And what causes that additional tooltip with the black background to appear? How can I add those descriptive tooltips to other links?

Appreciate your guidance.
Ying
April 23, 2024 at 2:32 pm
1. Try changing this:
remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger', 99 );

to:
```
add_action ('wp', function () {
    remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger', 99 );
});
```
2. The View your shopping cart text is the title of the cart element for accessibility purposes, it’s added by Woocommerce, not from GP, so I’m not sure how to remove it using PHP. You might need to check with Woocommerce’s support. Or you can use JS below to remove the title attribute:
```
<script>// Disable tooltips by removing the title attribute
document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('.shopping-cart');
    elements.forEach(function(element) {
        element.removeAttribute('title');
    });
});
</script>
```
posmaymedia
April 23, 2024 at 9:58 pm

Hi Ying,

Thanks for your reply.

1. Updating the php did not work. Any other suggestions? I’ve included private information as part of my reply.

2. I added the javascript you provided to the wp_head using an element hook and that seems to have worked. I wasn’t sure where to add that, but I that made sense to me. Let me know if that is incorrect.

David

April 24, 2024 at 2:26 am

1. Try this instead:


add_action( 'wp', function() {
    if ( generate_get_option( 'nav_search_modal' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_search_modal_trigger');
    }
}, 20 );

posmaymedia
April 24, 2024 at 4:04 am

Thank you David – that worked. Your support is much appreciated.
David
April 24, 2024 at 5:47 am

Glad we could be of help

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Tooltip Positioning for Menu Icons