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!

Cagri Tacyildiz · Accepted Answer · 2020-05-01 10:23:34Z

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>

Hamza Arshad · Accepted Answer · 2020-05-01 09:55:39Z

0

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

.popover-class {

   color: black;

}

answered May 1, 2020 at 9:55

Hamza Arshad

8465 silver badges9 bronze badges

Collectives™ on Stack Overflow

Django: Change font-color inside a javascript-function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related