JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/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: #5b2da3;
  }
  .tooltip-custom.top .tooltip-arrow {
    border-top-color: #5b2da3;
  }
  .tooltip-custom.right .tooltip-arrow {
    border-right-color: #5b2da3;
  }
  .tooltip-custom.left .tooltip-arrow {
    border-left-color: #5b2da3;
  }
  .tooltip-custom.bottom .tooltip-arrow {
    border-bottom-color: #5b2da3;
  }
  
  .tooltip-custom-alt .tooltip-inner {
    background-color: #f2653c;
  }
  .tooltip-custom-alt.top .tooltip-arrow {
    border-top-color: #f2653c;
  }
  .tooltip-custom-alt.right .tooltip-arrow {
    border-right-color: #f2653c;
  }
  .tooltip-custom-alt.left .tooltip-arrow {
    border-left-color: #f2653c;
  }
  .tooltip-custom-alt.bottom .tooltip-arrow {
    border-bottom-color: #f2653c;
  }

JavaScript

/* ================================================
 * bootstrap-tooltip-custom-class.js v0.0.1
 *
 * Extend Bootstrap 3 Tooltip plugin by adding custom classes.
 * Custom classes can be added by using `customClass` paramater or via `data-custom-class` attribute.
 * There are 5 predefined custom classes in CSS: .tooltip-primary, .tooltip-success, .tooltip-info, .tooltip-warning, .tooltip-danger. 
 * ============================================= */

(function ($) {
  
  if (typeof $.fn.tooltip.Constructor === 'undefined') {
    throw new Error('Bootstrap Tooltip must be included first!');
  }
  
  var Tooltip = $.fn.tooltip.Constructor;
    
  $.extend( Tooltip.DEFAULTS, {
    customClass: ''
  });
    
  var _show = Tooltip.prototype.show;
  
  Tooltip.prototype.show = function () {
    
    _show.apply(this,Array.prototype.slice.apply(arguments));
    
    if ( this.options.customClass ) {
        var $tip = this.tip()
        $tip.addClass(this.options.customClass);
    }

  };
  
})(window.jQuery);

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