Bootstrap надає інформер для відображення невеликої підказки, що спливає, аналогічно наявної в iOS. Інформер покладається на сторонню бібліотеку Popper для позиціонування, тому вам потрібно переконатися, що на веб-сторінці викликається файл popper.min.js. до того, як ви зможете їх використати. Один із способів ініціалізації — розмістити наступний код десь після виклику jQuery.
<script> $(function () { $('[data-toggle="popover"]').popover() })
</script> Базовий інформер
Ось базовий приклад інформера — використовуйте data-toggle="popover" для визначення інформера та data-content="" для вмісту.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-content="Гірські черевики — тип взуття, що використовується в альпінізмі." style="margin:20px;"> Натисніть на мене
</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() })
</script> Положення інформера
За допомогою data-placement ви можете задати, де відображається інформер: зверху, знизу, ліворуч або праворуч. Ось основний приклад чотирьох інформерів з різним становищем.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div style="text-align:center"> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Челсі — щільно прилеглі ботильйони з еластичною бічною панеллю." style="margin:40px;"> Натисніть на мене
</button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Класичні черевики — це короткі шкіряні черевики, які носять чоловіки." style="margin:40px;"> Натисніть на мене
</button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Ковбойські чоботи — для ковбоїв." style="margin:40px;"> Натисніть на мене
</button> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Лижні черевики — для катання на лижах… так!" style="margin:40px;"> Натисніть на мене
</button>
</div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() })
</script> Заголовок інформера
Будь-який атрибут title, вказаний вами для елемента, стане заголовком інформера.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" title="Ботинки Джодхпур" data-toggle="popover" data-placement="right" data-content="Ботильйони, створені для верхової їзди, із закругленим носком та низьким підбором." style="margin:40px;"> Натисніть на мене
</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() })
</script> Закриття інформера
За замовчуванням інформер закривається, коли користувач знову клацає елемент (тому, який викликав інформер). Ви можете закрити інформер, коли користувач клацає будь-де документа (на відміну від елемента, який його викликав). Щоб закрити такий інформер, використовуйте data-trigger="focus".
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Тепер натисніть де-небудь в іншому місці."> Натисніть на мене
</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() })
</script> Інформер при наведенні
Ви можете змінити інформер так, щоб він викликався при наведенні миші, а не клацання. Для цього використовуйте data-trigger="hover".
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Тепер відійди від мене"> Наведи на мене
</button> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script> $(function () { $('[data-toggle="popover"]').popover() })
</script>