CODEWITHSUNDEEP
htmlcss
fda3r
fda3r

Reputation: 13

Multiple styles in tooltip? CSS

I have a tooltip that shows up, but I want the heading and text in it to be different styles.

HTML:

<div class="base">HEADING
<span class="base-hover">
<!-- Different style here -->
This is the text under the heading.
<span>
</div>

CSS:

.base {
width: 100px;
height: 50px;
font-size: 18px;
color: red;
text-align: center;
position: relative;
display: inline-block.
}

.base .base-hover {
visibility: hidden;
right: 30px;
bottom: 10px;
}

.base:hover .base-hover {
visibility: visible;
position: relative;
display: inline-block;
width: 100px;
height: 50px;
padding: 10px 60px;
white-space: pre-line;
text-align: center;
}

Understandably, this only has one style, font color red. I'd like the content to be black, but I can't add any colors without changing everything in the tooltip. If I try to separate the spans with another <span> or <p>, two tooltip boxes come up.

Thank you.

Upvotes: 0

Views: 205

Answers (2)

Deepu Reghunath
Deepu Reghunath

Reputation: 9673

yes you can give different color. give color style to base-hover element also

.base {
width: 100px;
height: 50px;
font-size: 18px;
color: red;
text-align: center;
position: relative;
display: inline-block.
}

.base .base-hover {
visibility: hidden;
right: 30px;
bottom: 10px;
}

.base:hover .base-hover {
visibility: visible;
position: relative;
display: inline-block;
width: 100px;
height: 50px;
padding: 10px 60px;
white-space: pre-line;
text-align: center;
color: black;
}
<div class="base">HEADING
<span class="base-hover">
<!-- Different style here -->
This is the text under the heading.
<span>
</div>

Upvotes: 1

Charles Lavalard
Charles Lavalard

Reputation: 2321

You are missing the = sign in class="base-hover"

.base {
  width: 100px;
  height: 50px;
  font-size: 18px;
  color: red;
  text-align: center;
  position: relative;
  display: inline-block.
}

.base .base-hover {
  visibility: hidden;
  right: 30px;
  bottom: 10px;
}

.base:hover .base-hover {
  visibility: visible;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 50px;
  padding: 10px 60px;
  white-space: pre-line;
  text-align: center;
}
<div class="base">
  HEADING
  <span class="base-hover">
    This is the text under the heading.
  </span>
</div>

Upvotes: 1

Related Questions