Bootstrap 4 cambia el color de la flecha de información sobre herramientas

Ya no busques más en otros sitios porque llegaste al espacio adecuado, tenemos la respuesta que quieres encontrar pero sin liarte.

Solución:

En bootstrap 4.1 puedes usar:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before 
    border-bottom-color: red !important;

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before 
    border-top-color: red !important;

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before 
    border-left-color: red !important;

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before 
    border-right-color: red !important;

El selector que buscas es .tooltip.bs-tether-element-attached-left .tooltip-inner::before:

.tooltip.bs-tether-element-attached-left .tooltip-inner::before 
    border-right-color: red;

Si desea que todas las flechas de información sobre herramientas sean rojas – jsfiddle:

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before 
    border-top-color: red;


.tooltip.bs-tether-element-attached-top .tooltip-inner::before 
    border-bottom-color: red;


.tooltip.bs-tether-element-attached-left .tooltip-inner::before 
    border-right-color: red;


.tooltip.bs-tether-element-attached-right .tooltip-inner::before 
    border-left-color: red;

Para Bootstrap 4.3.1

Añadir a archivo HTML

  Tooltip on top

Agregar al archivo CSS

.tooltip-inner 
    background-color: red;
    color: #444;
    width: auto;
    max-width: 150px;
    font-size: 100%;
    white-space: nowrap;


.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before 
    border-top-color: red;

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before 
    border-right-color: red;

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before 
    border-bottom-color: red;

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before 
    border-left-color: red;

Agregar al archivo Javascript

$(document).ready(function () 
    $('.btn').tooltip();
);

Si te ha resultado de provecho este artículo, nos gustaría que lo compartas con el resto juniors y nos ayudes a dar difusión a esta información.

---

---

Utiliza Nuestro Buscador