Django: Change font-color inside a javascript-function

Question

Good day,

the font-color of my html-body is changed via a css-file with following code:

body {
    background-color: #6d6a6a;
    color: white;
}

Now I've included a Bootstrap-Popover...

<button type="button" class="btn btn-sm btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

...and the necessary script...

<script>
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
</script>

But because of my css-file, some parts of text inside my popver (the "title" to be exact) are also rendered in white, I'm really new to javascript, so is it possible - and when it's possible? what would be the best solution - to change my font-color inside my Popover to black?

Thanks to all of you!

Answer 1

If your css doesn't change dynamically then use only css

 .popover .popover-content,.popover .popover-title  {
     color: red;
  }

But if u are changing your body dynamically then u can add class to your popover. Popover has always .popover as class name so u can

 $(document).ready(function () { $(function () { $('[data-toggle="popover"]').popover() }); }); function popchange(){ setTimeout(function () { $(".popover").addClass('popover-danger'); }, 10); }

 .popover-danger { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-sm btn-danger" data-toggle="popover"onclick="popchange()" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Answer 2

add class to your popover and then add the new css rule for that class:

.popover-class {

   color: black;

}