title: How to change background color of Bootstrap popover
body: <p>I have 3 popovers and i want that each one have a diferent backgound color. i am doing it with boostrap and css.
  I want to make if i put &quot;A&quot; inside class=&quot;&quot; of the span, the backgournd change to blue or if i put a &quot;B&quot; the backgournd change to green</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
     &lt;div&gt;
       &lt;span
             data-content=&quot;PopOver A&quot;
             data-placement=&quot;right&quot;
             data-trigger=&quot;hover&quot;
             class=&quot;popoverjs A&quot;&gt;PopOver A&lt;/span&gt;
     &lt;/div&gt;
     &lt;div&gt;
       &lt;span
             data-content=&quot;PopOver B&quot; 
             data-placement=&quot;right&quot; 
             data-trigger=&quot;hover&quot;
             class=&quot;popoverjs B&quot;&gt;PopOver B&lt;/span&gt;
     &lt;/div&gt;
     &lt;div&gt;
       &lt;span
             data-content=&quot;PopOver C&quot; 
             data-placement=&quot;right&quot; 
             data-trigger=&quot;hover&quot;
             class=&quot;popoverjs C&quot;&gt;PopOver C&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('.popoverjs').popover();
  &lt;/script&gt;
  
  &lt;style&gt;
  
  .popover-title {
    display: none; 
  }
  
  .popover {
    border: 0px;
    border-radius: 15;
    background: #39A5DB;
    color: white;
  }
  
  .popover.right .arrow:after {
    border-right-color: #39A5DB;
  }
  
  .A + .popover {
     background-color: blue;
   }
  
  .B + .popover {
     background-color: green;
   }
   
   .C + .popover {
     background-color: red;
   }
   
  &lt;/style&gt;
  </code></pre>
  <p>I dont know why its not working. I really appreciate your help.
  Also there is a link where you can test it: <a href="http://jsfiddle.net/8ho2zLks/27/" rel="nofollow noreferrer">LINK TO JSFIDDLE</a></p>