Bootstrap 4 Popover 内联样式问题

Question

我正在尝试使用内联 HTML 样式属性动态更改 Bootstrap 4 弹出窗口标题的颜色。不幸的是，该插件在没有任何逻辑的情况下删除了它们......正如您在以下示例中看到的：

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

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

Answer 1

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

默认值whiteList在这里。

您可以向此默认值添加新值，whiteList如下所示：

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

那么你的内联样式应该可以工作。