JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<button class="btn btn-default btn-custom" data-toggle="tooltip" data-custom-class="tooltip-custom" data-placement="bottom" title="Custom tooltip example">Custom tooltip</button>

<button class="btn btn-default btn-custom-alt" data-toggle="tooltip" data-placement="bottom" title="Another custom tooltip">Another custom tooltip</button>

CSS

.tooltip-custom .tooltip-inner {
  background-color: #f2653c;
}
.tooltip-custom.bs-tooltip-top .arrow:before {
  border-top-color: #f2653c;
}
.tooltip-custom.bs-tooltip-right .arrow:before {
  border-right-color: #f2653c;
}
.tooltip-custom.bs-tooltip-left .arrow:before {
  border-left-color: #f2653c;
}
.tooltip-custom.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #f2653c;
}

.tooltip-custom-alt .tooltip-inner {
  background-color: #5b2da3;
}
.tooltip-custom-alt.bs-tooltip-top .arrow:before {
  border-top-color: #5b2da3;
}
.tooltip-custom-alt.bs-tooltip-right .arrow:before {
  border-right-color: #5b2da3;
}
.tooltip-custom-alt.bs-tooltip-left .arrow:before {
  border-left-color: #5b2da3;
}
.tooltip-custom-alt.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #5b2da3;
}

JavaScript

;(function($) {

    if (typeof $.fn.tooltip.Constructor === 'undefined') {
        throw new Error('Bootstrap Tooltip must be included first!');
    }

    var Tooltip = $.fn.tooltip.Constructor;

    // add customClass option to Bootstrap Tooltip
    $.extend( Tooltip.Default, {
        customClass: ''
    });

    var _show = Tooltip.prototype.show;

    Tooltip.prototype.show = function () {

        // invoke parent method
        _show.apply(this,Array.prototype.slice.apply(arguments));

        if ( this.config.customClass ) {
            var tip = this.getTipElement();
            $(tip).addClass(this.config.customClass);
        }

    };

})(window.jQuery);


$(document).ready(function(){
  $('.btn-custom').tooltip();
  $('.btn-custom-alt').tooltip({
    customClass: 'tooltip-custom-alt'
  });
});