Link to home
Start Free TrialLog in
Avatar of Marisa
MarisaFlag for United States of America

asked on

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.
Avatar of lenamtl
lenamtl
Flag of Canada image

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
ASKER CERTIFIED SOLUTION
Avatar of Snarf0001
Snarf0001
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

ASKER

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?
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.
Avatar of Marisa

ASKER

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 :)