CODEWITHSUNDEEP
htmlcssbootstrap-4
Sebastian Rodriguez
Sebastian Rodriguez

Reputation: 37

How to change background color of Bootstrap popover

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 "A" inside class="" of the span, the backgournd change to blue or if i put a "B" the backgournd change to green

<div class="container">
   <div>
     <span
           data-content="PopOver A"
           data-placement="right"
           data-trigger="hover"
           class="popoverjs A">PopOver A</span>
   </div>
   <div>
     <span
           data-content="PopOver B" 
           data-placement="right" 
           data-trigger="hover"
           class="popoverjs B">PopOver B</span>
   </div>
   <div>
     <span
           data-content="PopOver C" 
           data-placement="right" 
           data-trigger="hover"
           class="popoverjs C">PopOver C</span>
    </div>
</div>

<script>
$('.popoverjs').popover();
</script>

<style>

.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;
 }
 
</style>

I dont know why its not working. I really appreciate your help. Also there is a link where you can test it: LINK TO JSFIDDLE

Upvotes: 1

Views: 2053

Answers (1)

Unmitigated
Unmitigated

Reputation: 89412

The popover is a new element that is directly appended to the body and removed after mouseout, which is why your CSS selectors did not target it. You can add a specific class to the body every time a popover trigger element is hovered over and remove it on mouseout; this class can be specified with a data attribute. Then, you can use CSS selectors to target the popover class when the body has a specific class.

Demo: http://jsfiddle.net/L5q1etjc/

$('.popoverjs').popover().hover(function(){
    $('body').addClass($(this).data('addclass'));
}, function(){
    $('body').removeClass($(this).data('addclass'));
});
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.container{
  margin-top: 10px;
}

.popover-title {
  display: none; 
}

.popover {
  border: 0px;
  border-radius: 15;
  background: #39A5DB;
  color: white;
}

.popover.right .arrow:after {
  border-right-color: #39A5DB;
}

body.A > .popover{ /*Change popover color*/
   background-color: blue;
 }
 
 body.A > .popover > .arrow, body.A > .popover > .arrow:after {
   border-right-color: blue; /*Change arrow color*/
 }

body.B > .popover {
   background-color: green;
 }
 
 body.B > .popover > .arrow, body.B > .popover > .arrow:after {
   border-right-color: green;
 }
 
 body.C > .popover {
   background-color: red;
 }
 
 body.C > .popover > .arrow, body.C > .popover > .arrow:after {
  border-right-color: red;
 }
 
 
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
   <div>
     <span
           data-content="PopOver A"
           data-placement="right"
           data-trigger="hover"
           data-addclass="A"
           class="popoverjs A">PopOver A</span>
   </div>
   <div>
     <span
           data-content="PopOver B" 
           data-placement="right" 
           data-trigger="hover"
           data-addclass="B"
           class="popoverjs B">PopOver B</span>
   </div>
   <div>
     <span
           data-content="PopOver C" 
           data-placement="right" 
           data-trigger="hover"
           data-addclass="C"
           class="popoverjs C">PopOver C</span>
    </div>
</div>

Upvotes: 1

Related Questions