JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="input-group" style='margin-top: 100px;'>
    <input type="text" class="form-control" name="security" id="security">
        <span class="input-group-addon">
            <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Tooltip here"> <!-- The class CANNOT be tooltip... -->
                <i class='glyphicon glyphicon-info-sign'></i>
            </a>
        </span>
    </input>
</div>

CSS

a.my-tool-tip, a.my-tool-tip:hover, a.my-tool-tip:visited {

    color: black;
}

JavaScript

$("a.my-tool-tip").tooltip();