v5: Change tooltip background & color to css variables for easier customization

Created by: jakubmuda

Right now changing tooltip colors requires changing the same color for all tooltip placements. Wouldn't it be better to use one single css variable --bs-tooltip-bg with fallback for background and one for color --bs-tooltip-color?

DEMO: https://jsfiddle.net/ncmq3k4w/

/*CHANGES IN BOOTSTRAP*/
.bs-tooltip-top .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--bs-tooltip-bg,#000);
}
.bs-tooltip-end .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--bs-tooltip-bg,#000);
}
.bs-tooltip-bottom .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--bs-tooltip-bg,#000);
}
.bs-tooltip-start .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--bs-tooltip-bg,#000);
}
.tooltip-inner {
    color: var(--bs-tooltip-color,#fff);
    background-color: var(--bs-tooltip-bg,#000);
}

/*DEMO*/
:root {
    --bs-tooltip-bg:       var(--bs-warning);
    --bs-tooltip-color:    var(--bs-dark);
}