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>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Сколько часов ,Вы проводите за компьютером