Тултип, або вигулькуюча підказка при ховері чи кліку
Use Case
Давай коротко розглянемо в яких випадках може знадобитись вигулькуюча підказка на твоєму проєкті:
- User onboarding. Коли тултипи використовуються, як навігація для користувачів; доприкладу для створення інтерактивних гайдів з онбордингу.
- Advanced feature discovery. Коли тултипи надають користувачам додаткову інформацію про продукт чи послугу на сайті; через вигулькуючі підказки часто можна деталізувати перевагу чи фічу продукту.
- Contextual tooltips. Часто більш унікальні функції продукту можуть потребувати трохи контексту, перш ніж користувачі повністю зрозуміють, як найкраще ними користуватися. Схожі рішення можна зустріти, наприклад, у картках прайсингу.
- Product engagement. Коли ми можемо використати тултип для залучення користувачів до взаємодії з продуктом, секцією чи блоком на нашому сайті; також може бути використаний для підняття конверсійності певного UI елементу (кнопки) чи цілого блоку, секції.
Список можна було б ще продовжувати, але цього достатньо, щоб зрозуміти принцип застосування цього UI елементу у своєму проєкті Webflow. Тому пропоную перейти до технічної реалізації тултипу, використовуючи кастомний сніпет коду. Розпочнемо з додавання сніпету до твого проєкту.
Додавання сніпету коду
Додай цей код в розділ <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> до будь якого іншого елементу та прописати до нього необхідну підказку. Сніпет коду автоматично розпізнає твої нові елементи з тригерним класом і застосовуватиме свій скрипт без додаткових налаштувань коду. Слідкуй тільки, щоб ти завжди переглядав зміни на останній опублікованій версії свого сайту.
