We help IT Professionals succeed at work.

Something is conflicting with my CSS for tooltips

143 Views
Last Modified: 2019-02-14
I'm trying to get tooltips to work on this page, but they are not showing up. https://www.stadriemblems.com/products/enamel-pins-test/

I have one inserted above the "Get a Quote Here" h1. The text "Hover Me to Preview" should be showing up.

I have a local VM on my machine, and it's not showing up there either, which makes sense. But when I just double-click the file and view it in the browser outside of the VM, it works (because all of our external assets are loaded dynamically and need the VM to load, so when I just double-click the file and view it in the browser, it's a version without any of the other assets). This leads me to believe that there is some other bit of CSS that's interfering with it. What I can't figure out is how I would go about figuring out what the specific bit of CSS is that's conflicting with it. I did the whole F12/Console thing and did a search for the word "tooltip" (the style/class name) but got no results.

Right now I have the tooltip CSS in the head of this page. I tried moving it to the external style.css to see if it would make a difference, but it did not.

Here is the code:

.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .top {
    min-width:200px; 
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .top {
    display:block;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}	

Open in new window

     

Let me know if you need more information. That was a little hard to explain.
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Hi,

there are a lot of errors in the console, so try to fix them first.
using Chrome right click / inspect then check the console you will see all errors

So I have check in your page and you have more than one jquery.js reference so this is causing error
keep the first one https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

and remove this one
/static/js/jquery.min.js
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
MarisaWeb Design

Author

Commented:
Oh, duh. OK, I renamed my class tooltip1 and it worked. I got rid of the overflow:hidden but it is still cut off, I presume because that's where the div ends. Is it possible for it to override that? It's already at z-index:99999999;, so maybe not?
CERTIFIED EXPERT

Commented:
Actually it's still in there.  The styles.css files has section set with overflow:hidden !important, which is what's blocking it.
You can override that in the section.white_bg class you already have, but will need to apply put !important on that one as well to get over the first.  

No idea what implications that might have for the rest of the site, but seems to work for this page.

Optionally... you have two "clear-div" classes adding whitespace at the top.  If you took those out, and added padding to the white_bg section, then this particular tooltip would fit entirely within the containing one and you could leave it as hidden.  But that may not be foolproof if you have longer tips on other places.
MarisaWeb Design

Author

Commented:
I thought you were referring to the overflow:hidden inside the tooltip class itself. But yup, I temporarily removed it from the section class and that did it. I don't have a long-term plan yet, because like you said, I'm not sure the implications, but at least I know what's going on now. Thank you!
CERTIFIED EXPERT

Commented:
Glad I could help :)

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.