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