Bootstrap надає функціональність спливаючої підказки, що дозволяє відображати стилізовану підказку, коли користувач наводить курсор на елемент. Текст спливаючої підказки береться з атрибуту title.
Підказки, що спливають, найкраще підходять для елементів <a> та <button>.
Підказки покладаються на сторонню бібліотеку Popper для позиціонування, тому вам потрібно переконатися, що на веб-сторінці викликається файл popper.min.js.
Ініціалізація
Підказки за замовчуванням не включені і вимагають ініціалізації до того, як ви зможете їх використовувати. Один із способів ініціалізації — розмістити наступний код десь після виклику jQuery.
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() })
</script> Підказка для посилань
Ось основний приклад застосування підказки до посилання.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p style="margin:40px;">Подивися моє <a target="_blank" href="https://www.quackit.com/css/grid/tutorial/" data-toggle="tooltip" data-placement="top" title="Легко створювати складні макети за допомогою CSS!"> посібник з Grid</a>, адже ніколи не дізнаєшся, коли воно може знадобитися!</p> <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="tooltip"]').tooltip() })
</script> Спливаюча підказка для кнопок
Ось приклад застосування підказки до кнопки.
<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="tooltip" title="Популярне взуття" 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="tooltip"]').tooltip() })
</script> Положення підказки
Ви можете вказати, щоб спливаюча підказка відображалася зверху, знизу, ліворуч або праворуч. Ось основний приклад чотирьох підказок, кожна з яких має різне положення.
<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="tooltip" data-placement="top" title="Зверху" style="margin:20px;"> Туфлі
</button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Дело" style="margin:20px;"> Черевики
</button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Знизу" style="margin:20px;"> Уггі
</button> <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Зліва" 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="tooltip"]').tooltip() })
</script>