最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Bootstrap 4 Popover inline styling issue - Stack Overflow

programmeradmin2浏览0评论

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 piled and minified CSS -->
<link rel="stylesheet" href=".3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src=".4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src=".js/1.14.7/umd/popper.min.js"></script>

<!-- Latest piled JavaScript -->
<script src=".3.1/js/bootstrap.min.js"></script>

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

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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css">

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

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

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

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

Any idea to solve this? Thanks.

Share Improve this question edited Nov 5, 2019 at 17:21 marc_s 756k184 gold badges1.4k silver badges1.5k bronze badges asked Nov 4, 2019 at 12:25 Dan A.S.Dan A.S. 71110 silver badges24 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

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.

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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css">

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

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

<!-- Latest piled JavaScript -->
<script src="https://maxcdn.bootstrapcdn./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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css">

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

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

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

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

Inline styles are automatically deleted by Bootstrap when it es to popovers. You'll have to create CSS classes to control them like shown below:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: '<span class="redPopover">my title</strong>',                                                 
        content: '<span class="bluePopover">my content</span>',        
    });   
  
  $(this).popover('show');
 });
.redPopover{
  color: red;
}
.bluePopover{
  color: blue;
}
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css">

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

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

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

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

发布评论

评论列表(0)

  1. 暂无评论