Popup when hover on text - html

Question

I am trying to add a popup when hover on my text (span).
I'm trying to do it like they explain in W3schools:
https://www.w3schools.com/css/css_tooltip.asp
But I am already using style in my span to color the text that I want to hover, so if I add the class with the properties from w3schools to my span the text is gonna be hidden since they have visibility: hidden; in the span class.
I am very new to this, so I would be glad if someone could help me.

Answer 1

If you want to add color to the span text (My text) then add a color property to .tooltip class in the w3schools example
However if your goal is adding color to tooltip text then adjust the color property in .tooltip .tooltiptext{}
This is the same example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* color of the span text */
color: rgb(119, 162, 241);
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
/* color of the tooltip text */
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">My text</span>
</div>

Answer 2

I'm also very new to HTML and CSS, but I'll try to answer, anyway.
You can try to nest spans...
Taking W3Schools' code as an example, it will look something like this:
.p {
text-align: left;
}
.firstSpan {
color: rgb(119, 162, 241)
}
.firstSpan .secondSpan {
visibility: hidden;
width: 120px;
background-color: gray;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.firstSpan:hover .secondSpan {
visibility: visible;
}
<p>Let's try some 'nested' spans.</p>
<p>This is some text in a paragraph. You can hover <span class="firstSpan">over me<span class="secondSpan">Some text.</span></span> and you'll see some text.
</p>
<p>Another text in another paragraph. Hover <span class="firstSpan">over me<span class="secondSpan">A hint.</span></span> and you'll see some text — Maybe a hint.
</p>
Depending on what you want, nested spans may not be the best practice, but if what you're looking for is a simple inline container... go for it.
I hope I was helpful. 😉