css styling popover title and content. background-color for multiple popups using custom class

Question

User1382824067 posted

<div><div class="votecell post-layout--left"> <div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="59937457"> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">I am using react-bootstrap to add multiple popover with different popover-title background color using css class to change the color. So far, when I move the pointer from popover to popover, the popover-title is the same color. Any help is appreciated.</div> </div> </div> <div class="postcell post-layout--right"> <div class="post-text" itemprop="text">

in JSX
<Popover id="1" title="test" className={getPopOverStyling(id)}>Test Content</Popover>

getPopOverStyling(id) {

  if (id === 1) {
    return "red"
  } else if (id === 2) {
    return "blue"
  } else if (id === 3) {
    return "green"
  }
}

in my css

.popover-title {
  height: 25px
  color: #ffffff
  font-size: 18px
  font-weight: bold
}

// for each of my following color, I want to reuse the popover-title styling, I am not sure if I got the correct syntax. 
// Since I already defined .popover-title, I like to assign the color style with .red and call .red class name which assigning the popover 
// control in jsx file

.red, .popover-content {background-color: #ffffff} .popover-title{background-color: red}

.green,  .popover-content {background-color: #ffffff} .popover-title{background-color: green}

.blue, .popover-content {background-color: #ffffff} .popover-title{background-color: blue}

I was trying to switch background color but not sure how to do this.

</div> </div></div>

Answer 1

User-939850651 posted

Hi John Aloo,

<Popover id="1" title="test" className={getPopOverStyling(id)}>Test Content</Popover>

You use id as a parameter to get its css style, but the id never changes, then it will always return ‘red’, then the color will not change with it.

What you need is to change the value of id to get different results.

You can also refer to below example, hope it can helps you.

React JS react-bootstrap PopOver change the background-color for different button using className

Best regards,

Xudong Peng