Popover в Input Bootstrap / Скрипты / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 1159

Количество символов:

Посмотрели: 2284 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Скрипт, Script, Snippet, input, сниппет, Bootstrap, html, popover

Поделился: BootstrapТема

Добавлено: 2016-06-29 в 01:28

Метка: 1581116262

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/bootstrap/v3/3-3-6/bootstrap.css" />
<script src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script>

<style>
body{background:url(https://bootstraptema.ru/images/bg/bg-6.png)}
</style>

<br><br><br><br><br><br>

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">

<input id="popover-content" title="Здесь название" data-toggle="popover" data-placement="top" placeholder="Нажмите на поле" data-content="Здесь будет Ваше содержимое" class="form-control" />
<input id="popover-content" title="Здесь название" data-toggle="popover" data-placement="right" placeholder="Нажмите на поле" data-content="Здесь будет Ваше содержимое" class="form-control" />
<input id="popover-content" title="Здесь название" data-toggle="popover" data-placement="left" placeholder="Нажмите на поле" data-content="Здесь будет Ваше содержимое" class="form-control" />
<input id="popover-content" title="Здесь название" data-toggle="popover" data-placement="bottom" placeholder="Нажмите на поле" data-content="Здесь будет Ваше содержимое" class="form-control" />

</div>
</div>
</div>

<script>
$("[data-toggle=popover]").popover({
 html: true, 
 content: function() {
 return $('#popover-content').html();
 }
});
</script>