1

Tengo una tabla en la cual dentro de una de sus celdas tengo una etiqueta "a" a la cual deseo mostrar un popover al pasar el cursor del mouse:

    <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>

Para agregar el popover me valgo de 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');
    }
};

Para darle estilo al Popover utilizo este código en un archivo css:

    .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;
}

introducir la descripción de la imagen aquí

Como pueden ver, solo se aplica el estilo al Arrow pero no al background...

1 respuesta 1

1

Intenta agregando en archivo CSS, color de fondo al popover-title y popover-content.

Por ejemplo:

.popover-title,
.popover-content {
    background-color: #f0ad4e !important;
}

Mas info sobre la declaración !important aquí

3
  • Hola: Gracias por tu respuesta, lo intente pero no sucede nada , el popover sigue mostrándose en gris cuando inserto los atributos por medio de jquery... el 22 nov. 2016 a las 17:00
  • Hola: Gracias nuevamente, acabo de darme cuenta que el problema lo genera un bootstrap modal, antes de mostrar el modal los popovers se ven bien, después de mostrar el modal y cerrarlo, todos los popovers pierden el background-color del content... el 22 nov. 2016 a las 17:45
  • Muchas gracias, me funciono al cambiar el 'background-color' por backgroud:#f0ad4e!important el 22 nov. 2016 a las 18:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.