我正在尝试使用内联 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>
有解决这个问题的办法吗?谢谢。
最佳答案
Popover 有一个 whiteList
选项,其中包含允许的属性和标签。
whiteList
的默认值为 here .
您可以像这样向这个默认的 whiteList
添加新值:
$.fn.tooltip.Constructor.Default.whiteList['*'].push('style')
那么你的内联样式应该可以工作了。
关于javascript - Bootstrap 4 Popover 内联样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58693431/