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

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

whiteList 的默认值为 here .

您可以像这样向这个默认的 whiteList 添加新值:

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

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