Bootstrap 4 Popover内联样式问题

我正在尝试使用内联HTML样式属性动态更改Bootstrap 4 popover标题的颜色。不幸的是，该插件正在删除它们而没有任何逻辑……如下面的示例所示：

$('#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>

有什么办法解决这个问题吗？谢谢。

更新模板以插入自己的类，然后可以使用外部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>

如果您不知道使用的颜色，则可以使用jQuery动态附加style元素。

$('#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',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>

弹出框有一个whiteList选项，其中包含允许的属性和标签。

whiteList的默认值为here。

您可以像这样向此默认whiteList添加新值：

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

然后您的内联样式应该起作用。

当涉及到弹出窗口时，内联样式会被Bootstrap自动删除。您必须创建CSS类来控制它们，如下所示：

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',title: '<span class="redPopover">my title</strong>',content: '<span class="bluePopover">my content</span>',});   
  
  $(this).popover('show');
 });

.redPopover{
  color: red;
}
.bluePopover{
  color: blue;
}

<!-- 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>

Bootstrap 4 Popover内联样式问题

baobeicuijina 回答：Bootstrap 4 Popover内联样式问题

大家都在问