<button title="Test tooltip" class="btn btn-primary">

  Test button

</button>

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

}

$("[title]").tooltip({

        placement: 'bottom',

  delay: { "show": 500, "hide": 100 },

  offset: '0 10',

  template: '<div class="tooltip" role="tooltip"><div class="arrow custom-class"></div><div class="tooltip-inner bg-success rounded-pill shadow"></div></div>'

});