Tooltips on input form for bootstrap (focus)

by mylastof

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
        <input class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-control" rel="tooltip" data-placement="top" type="text" data-original-title="Tooltips on top" placeholder="focus me" />
        <input class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-control" rel="tooltip" data-placement="right" type="text" data-original-title="Tooltips on right" placeholder="focus me" />
        <input class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-control" rel="tooltip" data-placement="bottom" type="text" data-original-title="Tooltips on bottom" placeholder="focus me" />
        <input class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-control" rel="tooltip" data-placement="left" type="text" data-original-title="Tooltips on left" placeholder="focus me" />

CSS

body {
   margin: 100px;
   font-size:20px;
}

JavaScript

$('[rel=tooltip]').tooltip({'trigger':'focus'});