JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<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: #5b2da3;
}
.tooltip-custom.tooltip-top .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: #5b2da3;
}
.tooltip-custom.tooltip-right .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: #5b2da3;
}
.tooltip-custom.tooltip-bottom .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: #5b2da3;
}
.tooltip-custom.tooltip-left .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: #5b2da3;
}

.tooltip-custom-alt .tooltip-inner {
    background-color: #f2653c;
}
.tooltip-custom-alt.tooltip-top .tooltip-inner::before, 
.tooltip-custom-alt.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: #f2653c;
}
.tooltip-custom-alt.tooltip-right .tooltip-inner::before, 
.tooltip-custom-alt.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: #f2653c;
}
.tooltip-custom-alt.tooltip-bottom .tooltip-inner::before,
.tooltip-custom-alt.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: #f2653c;
}
.tooltip-custom-alt.tooltip-left .tooltip-inner::before,
.tooltip-custom-alt.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: #f2653c;
}

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