Bootstrap 4 Popover inline styling issue

Question

I'm trying to change the color of the Bootstrap 4 popover title dynamically using the inline HTML style attribute. Unfortunately the plugin is removing them without any logic... as you can see in the following example:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: '<span style="color:red">my title</span>',                                                 
        content: '<span style="color:blue">my content</span>',        
    });   
  
  $(this).popover('show');
 });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="test" type="button">Click Me</button>

Any idea to solve this? Thanks.

Answer 1

The Popover has a whiteList option, which contains allowed attributes and tags.

The default value of whiteList is here.

You can add new values to this default whiteList like this:

$.fn.tooltip.Constructor.Default.whiteList['*'].push('style')

Then your inline style should work.

Answer 2

Update the template to insert you own classes then you can easily control using external CSS:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: 'my title', 
        content: 'my content',
        template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header red"></h3><div class="popover-body blue" ></div></div>'
    });   
  
  $(this).popover('show');
 });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.red {
  color:red;
}
.blue {
 color:blue;
}
</style>
<button id="test" type="button">Click Me</button>

If you don't know the colors used you can dynamically append the style element using jQuery.

$('#test').click(function(e){
     var r1 = Math.floor(Math.random()*200);
     var r2 = Math.floor(Math.random()*200);
     var c1 = '#00ff00';
     var c2 = '#ffff00';

     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: 'my title', 
        content: 'my content',
        template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header c'+r1+'"></h3><div class="popover-body c'+r2+'" ></div></div>'
    });   
    $('head').append('<style>.c'+r1+' {color:'+c1+';}.popover-body.c'+r2+' {color:'+c2+';}</style>')
  
  $(this).popover('show');
 });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="test" type="button">Click Me</button>