29 Листопад 2016
1 342
Рубрика: уроки

Уроки по Bootstrap: спливні підказки (tooltip.js)

Стовідсотково вірного перекладу українською немає (російською це називається «всплывающая подсказка»), кожен називає його як хоче, тож я називатиму «спливна підказка». Якщо маєте кращий переклад — прошу до коментів.

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 підказка буде відображатися зліва, коли це можливо, в іншому випадку — праворуч.

Тепер я хочу бачити коментарі 5