Назар Токар
Опубліковано: 29 Листопада 2016
Оновлено: 4 Травня 2017

Tooltip — елемент з текстом, що називається спливною підказкою. Плагін tooltip.js дозволяє показувати невелике спливаюче вікно, яке з’являється, коли користувач наводить курсор миші на елемент:

Цей модуль можна використовувати як окремо (підключити окремо файл tooltip.js), так і разом з іншими компонентами Bootstrap (за допомогою файлу bootstrap.js або bootstrap.min.js). Для роботи плагін вимагає встановленого jQuery.

Як створити підказку

Щоб вказати, на якому елементі показувати підказку, додай йому атрибут data-toggle="tooltip".

В атрибуті title треба вказати текст, який з’явиться при наведенні курсору:

<a href="#" data-toggle="tooltip" title="Що ти тут очікував побачити?">Наведи курсор</a>

Тільки цього коду недостатньо, підказки також повинні бути підключені за допомогою jQuery. Щоб вибрати, які елементи повинні мають створювати такі підказки, використовується метод tooltip(). Окрім того, наступним кодом можна підключити підказки на всьому документі одразу, зазвичай так і робиться:

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

Позиції підказок

За замовчуванням підказки відображаються над елементом.

Щоб змінити позицію підказки, використовуй атрибут data-placement:

<a href="#" data-toggle="tooltip" data-placement="top" title="підказка!">підказка</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="підказка!">підказка</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="підказка!">підказка</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="підказка!">підказка</a>

Окрім того, можна використовувати атрибут data-placement із значенням auto: в такому випадку браузер сам вирішить, яку позицію краще вибрати. Наприклад, при значенні auto left підказка буде відображатися зліва, коли це можливо, в іншому випадку — праворуч.

← Тисни «Лайк», щоб читати нас у Фейсбуці
Tokar_ua Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

6 коментарів

спочатку нові
за рейтингом спочатку нові за хронологією

ще може бути випливаюча підказка.

Дякую, цікаво та доходчиво розповів.

Виринаючі підказки

Автор
Назар Токар

Непогано, дякую

Це перемога! Писать только на украинском, чтоб москальские программисты ничему не научиились.

Автор
Назар Токар

Перемога — вставляти свою думку туди, де вона нікому не потрібна :)