1

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

1 Answer 1

1

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>

2
  • 1
    THANKS SO MUCH! it works smooth! I have to fix a few things more and its done! Thanks again! Jul 2, 2020 at 0:05
  • @SebastianRodriguez No problem. Jul 2, 2020 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.