Popover Bootstrap 3

Пример применения стандартного поповера Bootstrap 3 для элемента input, Расположения информера с права и с низу.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script type='text/jаvascript' src='https://code.jquery.com/jquery-1.10.1.js'></script>


 <!--container --><div class="container">
 <!--row --><div class="row">

 <!--col-sm-8 col-sm-offset-2 --><div class="col-sm-8 col-sm-offset-2">

 <!--col-sm-6 --><div class="col-sm-6">
 <div class="input-group">
 <input class="form-control" placeholder="Поповер с права" type="text">
 <span class="input-group-btn">
 <a class="btn btn-default" data-toggle="popover" data-placement="right" title="Поповер с права" data-container=".row" data-content="Здесь будет Ваш текст"><i class="fa fa-question"></i></a>
 </span>
 </div>
 </div><!--/.col-sm-6 -->

 <!--col-sm-6 --><div class="col-sm-6">
 <div class="input-group">
 <input class="form-control" placeholder="Поповер с низу" type="text">
 <span class="input-group-btn">
 <a class="btn btn-default" data-toggle="popover" data-placement="bottom" title="Поповер с низу" data-container=".row" data-content="Здесь будет Ваш текст"><i class="fa fa-question"></i></a>
 </span>
 </div>
 </div><!--/.col-sm-6 -->

 </div><!--col-sm-8 col-sm-offset-2 -->

 </div><!--/.row -->
</div><!--/.container -->

<script>
$(document).ready(function() {
 $('[data-toggle="popover"]').popover();
});
</script>