JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<a class="element1" data-toggle="tooltip" data-container="body" title="Tooltip on element 1">
  Element 1 div
</a>
<a class="element1" data-toggle="tooltip" data-container="body" title="Tooltip on element 1">
  Another element 1 div
</a>
<a class="element2" data-toggle="tooltip" data-container="body" title="Tooltip on element 2">
  Element 2 div
</a>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.tooltip-class1 .tooltip-inner {
    background-color: #9030d0;
}

.tooltip-class2 .tooltip-inner {
    background-color: #00abff;
}

JavaScript

$('.element1')
  .tooltip({placement : 'bottom'})
  .each(function() {
  	$(this).data('bs.tooltip').tip().addClass('tooltip-class1');
	});
  
$('.element2')
  .tooltip({placement : 'bottom'})
  .each(function() {
  	$(this).data('bs.tooltip').tip().addClass('tooltip-class2');
	});