JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="//getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Made by @Ram"
   class="tooltips red-tooltip">My link with red tooltip</a>
   
   
   
   <a href="http://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color#41523487" style="display:block; margin-top:100px;">My answer in StackOverflow with additional guids.</a>

CSS

.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow, 
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}

JavaScript

$(document).ready(function(){
    $('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
    //$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
});