JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<h3>ToolTip 1 <span style="font-size:20px" class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="right" title="TOOLTIP" aria-hidden="true"></span></h3>


<h3 class="myClass">ToolTip 2 <span style="font-size:20px" class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="TOOLTIP" aria-hidden="true"></span></h3

CSS

.tooltip-inner {
    color:red;
    position: relative;
    background-color: blue;
    margin-left: 50px;
}

.tooltip.right .tooltip-arrow{
    display: none;
  } 

.myClass .tooltip-inner {
    color:white;
}

JavaScript

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
});