JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<a href="#" data-toggle="tooltip" title="first tooltip">tooltip on link </a><br/>
<input data-toggle="tooltip" title="tooltip on input!" type="text" placeholder="Hover me!" name="firstname"/>
<br/>
<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/>

JavaScript

$('a').tooltip({placement: "bottom"});

$('input[type=text][name=firstname]').tooltip({
    placement: "bottom",
    trigger: "hover"
});

$('input[type=text][name=secondname]').tooltip({
    placement: "right",
    trigger: "focus"
});