Tooltip class mysteriously overridden-CodePudding

So I thought it'd be a great idea to add tooltips to my Neocities site, but I seem to have run into an issue I can't find the answer to...

Okay for some ungodly reason my tooltip class isn't working. I assigned my div the class, and the span inside it the tooltiptext class, but it would still just use what I had assigned the body. I only noticed this when the text was still white, when it should've been black, among other things.

Here's the html section:

<h1>please god ignore the background, I haven't found a good one yet</h1>
      
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
      
<div >
  <p>this is literally copy pasted from w3schools what the actual fuck-
      <span >wait a minute this should have black text why isn't the class working</span></p>
</div>

I'm including the header and image parts because I'm desperate and worry the answer lies within one of the miniscule details

here's the stylesheet:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

body {
  background-color: #fbb291;
  color: white;
  font-family: Verdana;
}

Once again all copy pasted from w3schools just to make sure it wasn't me

Like I said, the text of the tooltip-assigned div still has white text, and nothing from the tooltip class...

Either the body is overriding my class, or there's something going on with the class itself that's stopping it from working.

I don't know if this helps, but I have assigned a class to my body, which works perfectly fine. I'm wondering if there's something going on with it? I mean, it shouldn't, because I have another page using said class, along with divs using other classes that work perfectly fine!

.door {
  
  margin: 0 auto;
  
  background-image: url("https://64.media.tumblr.com/1adbeafb3ca992a7681ede48ddedcbbd/d5886a952040c00b-9b/s250x400/a917bb1772111a1460eac4922c0502e0ba860bd1.jpg");
  /*position: relative;*/
  width: 600px;
  height: 900px;
  
  text-align: center;
  
  }

I apologize if I'm not making much sense, I'm not super familiar with certain html and css terms.

CodePudding user response：

In this snippet based on your code, the tooltip text is black:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

body {
  background-color: #fbb291;
  color: white;
  font-family: Verdana;
}

<h1>please god ignore the background, I haven't found a good one yet</h1>
      
<img id="A wooden door framed with clip-art of flowers." style="position: relative;" src="images/flowerydoor.png" />
      
<div >
  <p>this is literally copy pasted from w3schools what the actual fuck-
      <span >wait a minute this should have black text why isn't the class working</span></p>
</div>

If you're using other libraries with their own CSS or are deploying this on a third-party website, there could be a namespace collision. You can check what styles are applying to an HTML element using the Chrome DevTools or similar tools in other browsers. Here is a guide for doing this in Chrome: https://developer.chrome.com/docs/devtools/css/overrides/