Bootstrap 4 Change Tooltip Arrow Color

Answer :

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

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

For Bootstrap 4.3.1

Add to HTML File

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">   Tooltip on top </button> 

Add to CSS File

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

Add to Javascript file

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