How to apply color to Bootstrap popover using jquery?

I have a table in which inside one of its cells I have a "a" tag to which I want to show a popover when I pass the mouse cursor:

    <table id="tableOcMateriales" class="ctrlLineTable table table-condensed  table-striped table-bordered table-hover dataTables_length" style="width: 100%; align-content: center">
    <thead class="ColorHeaderTable">
        <tr>
            <th style="width: 20%">
                @Html.DisplayNameFor(model => model.Total)
            </th>
            <th style="display: none"></th>
            <th></th>
        </tr>
    </thead>
    <tbody class="celda">
        @foreach (var item in Model)
        {
            <tr>
                <td style="width: 20%">
                    @Html.DisplayFor(modelItem => item.Total)
                </td>
                <td style="display: none">
                    @Html.DisplayFor(modelItem => item.OrdenCompraDetalleId)
                </td>
                <td class="celda" style="width: 20%">

                    @if (!string.IsNullOrEmpty(item.Comentarios))
                    {
                        <a style='text-decoration: none;' href='#' id='[email protected]' title=''>
                            <i class='fa fa-toggle-on fa-lg' aria-hidden="true" style='color: #daa520'> </i>
                        </a>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

To add the popover I'm worth of jquery:

    function changueTurnOffClass(ordenCompraDetalleId, turn, comentarios) {
    if (turn) {
        $("#turnonoff-" + ordenCompraDetalleId).find('i').removeClass("fa-toggle-on").addClass("fa-toggle-off").css('color', '#daa520').prop('title', '');
        $("#turnonoff-" + ordenCompraDetalleId).prop('title', '').attr("data-toggle", "popover").attr('data-placement', 'left').attr('data-trigger', 'hover').attr('data-content', comentarios).attr('data-original-title', '');
        $('[data-toggle="popover"]').popover();
    }
    else {
        $("#turnonoff-" + ordenCompraDetalleId).find('i').removeClass("fa-toggle-off").addClass("fa-toggle-on").css('color', '#008000').prop('title', 'Excluir de la Orden de compra');
    }
};

To style the Popover I use this code in a css file:

    .popover {
    background-color: #f0ad4e;
    border-color: #004881;
    min-width: 100px;
    width: 100%;
    max-width: 400px;
}

.popover-content {
    word-wrap: break-word;
    word-break: break-all;
}

.popover.left .arrow:after {
    border-left-color: #f0ad4e;
}

As you can see, only the style is applied to the Arrow but not to the background ...