CODEWITHSUNDEEP
javascriptpythoncssdjangocolors
finethen
finethen

Reputation: 433

Django: Change font-color inside a javascript-function

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!

Upvotes: 0

Views: 248

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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>

Upvotes: 1

Hamza Arshad
Hamza Arshad

Reputation: 846

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

.popover-class {

   color: black;

}

Upvotes: 0

Related Questions