Bootstrap 4 change tooltip arrow color
The selector you are looking for is .tooltip.bs-tether-element-attached-left .tooltip-inner::before
:
.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
border-right-color: red;
}
If you want every tooltip arrow red - 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;
}
In bootstrap 4.1 you can use:
.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;
}