The following code functions correctly in the body area:
<div class="progress" style="height: 25px;">
<div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
However, when placed inside a popover, it does not work as intended.
Below is the code for the popover button:
<button type="button" class="btn btn-link text-white" style="margin-top:-5px;margin-bottom:-7px;" data-container="body" data-toggle="popover" data-placement="left" data-original-title="Average reviews">97.5% approval</button>
JS code:
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover',
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
And Popover content:
<div id="popover_content_wrapper" style="display: none">
<div class="progress" style="height: 25px;">
<div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 15px;">
<div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 15px;">
<div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
I should note that while the popover works well with images and styled text (such as strong tags), font awesome icons appear black even when specifying a color. This leads me to believe that CSS properties may be restricted within the popover element. Can anyone explain why this occurs and suggest a solution? Is the current approach incorrect?
Thank you in advance!