Webflow Tutorial #5. Як додати тултип для свого сайту
У цьому матеріалі я розповім про корисний сніпет коду, який ти швидко зможеш додати до свого проекту Webflow. Він дасть можливість налаштовувати тобі тултипи. Цей елемент буде корисний при створенні сторінок з прайсингом, таблиць порівнянь, для продуктових карток, та будь яких елементів, до яких потрібно додати коментар або розширене тлумачення.
Одна з найбільших переваг Webflow, що вона дає своїм користувачам доступ до модифікації свого сайту, завдяки можливості інтеграції кастомних сніпетів (фрагментів) коду. Це робить Webflow надзвичайно потужним та гнучким інструментом! І саме через це дизайнери, що опановують новий інструмент отримують також нову професію Webflow Developer.
Отже, один з корисних сніпетів коду, який я використовую для розширення функціональності своїх проектів на Webflow. Поїхали!
#1. Додавання тултипу
Додавання тултипу (підказки) до текстових або div-елементів можна зробити всього за пару хвилин за допомогою невеликого сніпету коду.
По-перше, тобі потрібно додати скрипти, налаштування JS і посилання на стилі. Ти можеш додати їх до налаштувань сторінки, якщо тобі потрібен тултип тільки на певній сторінці, або до налаштувань проекту, якщо ти хочеш, щоб скрипт спрацьовував на декількох сторінках твого сайту.
Як додати сніпет коду до свого проекту?
Додай цей код в розділ <head> або в налаштуваннях сторінки, або в налаштуваннях сайту.
<!--Tooltip Styling-->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light-border.css"/>
Тепер тобі потрібно додати javascript. Додай цей код в розділ користувацького коду </ body> або в налаштуваннях сторінки, або в налаштуваннях твого сайту.
<!--Tooltip Scripts & Settings-->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
tippy('.tooltip', {
animation: 'fade',
duration: 200,
placement: 'top',
arrow: true,
delay: [0, 50],
arrowType: 'sharp',
theme: 'light-border',
maxWidth: 220,
interactive: true,
})
</script>
Параметри стилю можуть бути налаштовані за необхідності, наприклад, видалення стрілки тултипу, зміна затримки анімації входу і виходу, максимальної ширини та багато іншого.
Як змінити стилі тултипу?
Ось технічна документація до бібліотеки, яка використовується у даному сніпеті коду. Звертайся до неї, щоб змінювати стилі тултипу. Тут ти зможеш обрати та змінити:
- стиль теми
- плейсмент тултипу
- стиль стрілки (гострі кути чи заокруглені; показувати стрілку чи ні)
- анімацію (появи та приховування тултипу)
- трігери (клік/ховер)
Як налаштувати клас для тултипу?
Найголовніше - це клас, який ти вирішиш використовувати для елементів, до яких застосовуватимеш інтегрований код. В прикладі коду вище для класу встановлено значення <.tooltip>, що означає, що тултип спрацьовуватиме по відношенню до будь-якого елементу, що має клас <tooltip>.
Ти можеш присвоїти клас будь-якому елементу, а не лише тексту або елементу <span> (span – це окрема частинка текстового елементу, яка може бути відділена та до якої ти можеш застосувати альтернативний стайлинг). Ти також можеш змінити назву цього класу на будь-яку іншу, але слідкуй, щоб цей клас був змінений і у твоєму фрагменті коді.
Як додати текст тултипу?
Тепер, коли ти інтегрував необхідний фрагмент коду та створив клас для своїх елементів, тобі потрібно додати текст тултипу, що з'являтиметься при ховері на елемент. Для цього, ти можеш скористатися секцією <custom attribute> у панелі налаштувань елементів <element settings>.
Перейди до елементу, який має клас <.tooltip>(або будь-який інший, який ти налаштував) та до якого ти хочеш застосувати власне тултип. Клацни на панель налаштування елементу. Тут тобі потрібна секція <custom <div> attributes>, що відповідає за додавання атрибутів до елементу.
Клацни на "+" та додай наступні параметри:
- у поле <Name>: data-tippy-content
- у поле <Value>: додай будь-який текст, який тобі необхідно помістити у тултип у якості підказки
Тепер ти можеш зберегти створений атрибут та опублікувати свій сайт.
Пам'ятай, що кастомний код, який ти інтегруєш на свій сайт не працює в режимі перегляду! Для того, щоб переконатися, що код відпрацьовує, тобі потрібно опублікувати сайт та переглянути його перейшовши за лінком, який вказує на твій тестовий домен "назва-твого-проекту-webflow.io" або на домен, який ти підключив до проекту.
Переконавшись, що код відпрацьовує, ти можеш додати клас <tooltip> до будь якого іншого елементу та прописати до нього необхідну підказку. Сніпет коду автоматично розпізнає твої нові елементи з тригерним класом і застосовуватиме свій скрипт без додаткових налаштувань коду. Слідкуй тільки, щоб ти завжди переглядав зміни на останній опублікованій версії свого сайту.
Підсумки
Сподіваюся туторіал був корисним і тепер ти знаєш, як працювати зі сніпетами коду та як швидко додати тултип до свого проекту Webflow без знання коду. Щоб дізнатися, як інтегрувати інші сніпети коду, які розширюють функціонал твого сайту Webflow, підписуйся на мої оновлення на Cases Media, або слідкуй за моїм персональним блогом на josephkobal.com.
Маєш запитання, напиши мені. Нижче залишу свої контакти, щоб ти швидше міг знайти мене в соцмережах та поділитися своїми думками чи задати питання.