Something is conflicting with my CSS for tooltips

Marisa
Marisa used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
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.
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?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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!
Glad I could help :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial