Multiple styles in tooltip? CSS

Question

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.

Charles Lavalard · Accepted Answer · 2021-05-25 08:10:34Z

1

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>

answered May 25, 2021 at 8:10

Charles Lavalard

2,34111 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepu Reghunath · Accepted Answer · 2021-05-25 08:16:34Z

1

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>

answered May 25, 2021 at 8:16

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

Collectives™ on Stack Overflow

Multiple styles in tooltip? CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related