JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

CSS

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

JavaScript

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl){
  return new bootstrap.Tooltip(tooltipTriggerEl)
});