By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Wordpress and Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!

How to style Elementor Pro tooltip for the nav menu?

Koni Kodes

Koni Kodes

Member
I would like to see the title when I hover over the nav item, but not with that box...
How can I fix this?
1579378568503.png
 
sms-design

sms-design

Member
Koni what widget generated that element or is it theme related?
 
Koni Kodes

Koni Kodes

Member
I'm using Elementor Hello theme. The header is a theme builder template using the Elementor (I think) Nav Menu widget.
1579382216168.png

It is capturing the title in the Menu Item on the Appearance Menu. Which is what I want it to do, but I can not fix the style. I want it offset the hover color as a background-color: #7d500b, color: #ffffff; border-radius: 5px
But I can't find it when I inspect the page.
 
Last edited:
sms-design

sms-design

Member
Koni can you share a live site url please
 
sms-design

sms-design

Member
Koni you have some tool tip css added from W3 school which is adding maybe an on focus event to your tooltip, in the dev inspector click hover and select all possible options to narrow down your css. You also have a forum added which has a css element.
 
Koni Kodes

Koni Kodes

Member
I do have a forum with some css, but I cannot find the w3 css. Where would I look in the inspector?
 
sms-design

sms-design

Member
If you do a view source on the page you will notice that part of the way down there is some CSS that references a tool tip I'm assuming that tool tip actually has a JavaScript file associated with it and embedded CSS in it which is actually putting the border around your menu what I'd suggest you do is disable the forum element and see if you still get the highlighted border around your all menu.
 
Koni Kodes

Koni Kodes

Member
Thank you @sms-design I was using inspection on the sections and not using View Page Source on the actual code.
I will look at that now.
 
Koni Kodes

Koni Kodes

Member
Actually that was my insert to with Custom CSS to try to change it:

Code:
.tooltip {
  font-size: 1.2em;
  color: #ffffff;
  background-color: #7d500b;
  border-radius: 4px;
}
.sub-menu {
  text-align: left !important;

Because I couldn't find the original culprit, I tried to create a work-around. I will remove that and still have the issue. So now I will disable Forum and see if that is what is causing it. But I am suspecting that it is from Hello Elementor because this message is on the Menus page:
1579452000995.png
 
Koni Kodes

Koni Kodes

Member
Deactivating the Forum did not change anything. Facebook groups aren't helping either.
I think I need to take this to github.
Thank you though.
 
Koni Kodes

Koni Kodes

Member
Facebook Community tells me that it is actually a Google tooltip and I need to find a different way to style that.
@sms-design Do you know of a good tutorial for that?
 
sms-design

sms-design

Member
Google Tooltip um!! that's an interesting response - have you now removed the title attributes shown in your recipe jpg above?
 
Koni Kodes

Koni Kodes

Member
Yes. Adam just came out with a great video today:
I love the two-tier concept and used that instead.

Someday I would love to make a widget that allows me to fix that. But I'm not there yet, and I really need to launch this to the potential alliance partners soon. So I will go with what I have right now.
 

Latest Resources

Other Elementor Resources

elementor official
Top