Bootstrap 4 Popover - проблема встроенного стиля

Question

Я пытаюсь динамически изменить цвет заголовка всплывающего окна Bootstrap 4, используя встроенный атрибут стиля HTML. К сожалению, плагин удаляет их без какой-либо логики ... как вы можете видеть в следующем примере:

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

Обновите шаблон, чтобы вставить свои собственные классы, тогда вы можете легко управлять с помощью внешнего 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>

Если вы не знаете используемых цветов, вы можете динамически добавить элемент style, используя 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 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 2

Встроенные стили автоматически удаляются Bootstrap, когда дело доходит до всплывающих окон. Вам нужно создать CSS-классы для управления ими, как показано ниже:

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