Avatar of Marisa
Marisa
Flag 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.
CSSHTMLWeb Languages and Standards

Avatar of undefined
Last Comment
Snarf0001

8/22/2022 - Mon
lenamtl

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
Snarf0001

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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?
Snarf0001

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
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!
Snarf0001

Glad I could help :)