Something is conflicting with my CSS for tooltips

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.
LVL 1
MarisaWeb DesignAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
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
Snarf0001Commented:
the .tooltip class is also declared in bootstrap, which has opacity:0 defined on it.  Which is hiding the entire "Hover Me" div.
If you override the opacity it should work, but note that you also have overflow:hidden on the parent container, so the top half of your tooltip is getting chopped off.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MarisaWeb DesignAuthor 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?
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Snarf0001Commented:
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 DesignAuthor 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!
Snarf0001Commented:
Glad I could help :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.