Як зробити чудові, анімовані підказки за допомогою CSS
Російська (Українська) translation by Ellen Nelson
Спливаючі підказки - це відмінний спосіб поліпшити інтерфейс користувача - UI, коли вашим користувачам потрібен додатковий опис для тієї химерної іконки, або коли вони хочуть перестрахуватися перед тим, як натиснути на кнопку, ну або може бути заголовок для "великоднього яйця" який йде разом з зображенням. Так давайте зробимо анімовані підказки прямо зараз, використовуючи не що інше як HTML і CSS.
Ось над чим ми збираємося працювати:
Перш ніж стрибати в котел, погляньмо на те, що ми збираємося зварганити. Наша мета - додати підказку простим способом, тому ми зробимо це додавши атрибут tooltip :
Зауваження про доступність та можливості
Якщо ви шукаєте спливаючі підказки сумісні з 508 розділом (стандарт, прийнятий у США, для створення веб-ресурсів для людей з обмеженими можливостями) або вам потрібні розумніші підказки з виявленням зіткнення контейнерів та/або підтримкою HTML вмісту або звичайного тексту, існує безліч рішень, у яких цих завдань використовуються сторонні скрипти.
У цьому посібнику потреби у доступності особливо не розглядаються. Ви знаєте своїх користувачів і те, що їм потрібно, тому переконайтеся, що ви вчили і поважаєте їхні потреби.
Давайте визначимо чого слід очікувати
Чудово! Давайте розкачаємо цей човен!
Ой, зачекайте! Є виноска (*), давайте спочатку домовимося про "додаткову розмітку не потрібна". Все-таки це магія! Нашим підказкам, що випливають, дійсно не потрібні додаткові DOM елементи, так яквони зроблені повністю на псевдо-елементах (::before і ::after), якими ми можемо керувати за допомогою CSS.
Якщо ви вже використовуєте псевдоелементи з іншого набору стилів і хочете створити підказку для цього елемента, вам може знадобитися трохи змінити структуру.
Жодної вечірки без підказок!
Зачекайте. Панове! Ще одне застереження: CSS-позиціонування. Щоб спливаючі підказки функціонували належним чином, їхній батьківський елемент (те, до чого ми прикріплюємо підказку) має бути
- position: relative , або
- position: absolute , або
- position: fixed
По суті, щось крім position: static — це режим позиціонування за умовчанням, призначений практично на всі елементи вашим браузером. Підказки, що випливають, мають абсолютне позиціонування і таким чином їм потрібно знати межі, в яких їх абсолютність має місце. Вказане за умовчанням статичне позиціонування не має своїх власних кордонів і не дасть вашим підказкам щось, від чого можна відштовхнутися, тому підказки використовуватимуть найближчий батьківський елемент, у якого чітко оголошено кордон.
Вам потрібно визначити, яке позиціонування працює краще, коли ви використовуєте підказки. У цьому посібнику мається на увазі, що батьківський елемент налаштований на position: relative . Якщо ваш інтерфейс ґрунтується на абсолютному позиціонуванні елементів, тоді можуть бути потрібні деякі зміни (додаткова розмітка), щоб навісити підказку на цей елемент.
Ну що ж, застрибуємо і помчала!
Селектор атрибута: Швидке нагадування
Більшість CSS правил написані для використання за назвою класу, наприклад .this-thing , але у CSS є кілька типів селекторів. Для наших чудових підказок ми використовуватимемо селектор атрибута/властивості — оголошується квадратними дужками.
Коли браузер зустрічає щось на кшталт цього:
він зрозуміє, що потрібно застосувати правила [foo], тому що в тезі є атрибут, названий foo. У цьому випадку сам span буде напівпрозорого чорного кольору з білим текстом.
HTML елементи мають різні вбудовані атрибути, і ми можемо придумати свої власні. На кшталт foo, або tooltip. За замовчуванням HTML не знає, що він означає, але за допомогою CSS ми можемо підказати HTML, що з цим робити.
Чому селектори атрибутів?
Ми будемо використовувати в першу чергу селектори атрибутів для поділу завдань. Використання атрибутів замість імен класів не дає нам жодних бонусних очок у цій битві; класи та атрибути мають однакове призначення. Однак, використовуючи атрибути, ми можемо тримати наш контент у вмісті, оскільки атрибути HTML можуть мати значення, в той час, як імена класів не можуть.
Розглянемо у цьому прикладі коду: ім'я класу .tooltip та атрибут [tooltip] . Ім'я класу є одним із значень атрибуту [class] , в той час, як атрибут tooltip має значення, а містить текст, який ми хочемо відобразити.
Тепер додаємо Алхімію у підказку
Наші підказки будуть використовувати два атрибути:
- tooltip: містить вміст підказки (рядок простого тексту)
- flow: не обов'язково; дозволяє нам керувати тим, як розкрити підказку. Ми можемо використовувати багато способів розміщення, але ми розглянемо 4 звичайні напрямки: зверху, ліворуч, праворуч, знизу.
Тепер налаштуємо основу для всіх підказок. Правила 1-5 пунктівзастосовуються для всіх підказок, незалежно від того, який напрямок flow ми їм поставимо. Пункти 6–7 мають відмінності для значень flow.
1. Відносність
Це батьківського елемента підказки. Давайте призначимо позицію так, щоб абсолютне розташування частин підказки (псевдоелементи :: before і :: after) знаходилося в контексті батьківського елемента, а не в контексті сторінки в цілому або прабатьківського елемента, або якогось іншого зовнішнього елемента в дереві DOM.
2. Настав час для псевдо-елементів
Настав час для виходу псевдоелементів на сцену. Поки що, ми поставимо загальну властивість обох частин ::before і ::after . Властивість content - виконує основну роботу псевдо-елемента, і незабаром ми до нього дістанемося.
Я не знаю, яке відношення має до цього "dink, але я завжди називав це так. Ця маленька, трикутна, загострена частина, що надає підказкам вигляду, як у міхура з діалогом, що вказує туди, звідки воно з'явилося. колір (transparent) для кордону, ми додамо колір пізніше, так само як і залежність підказки від напрямку flow.
Це не друкарська помилка, що значення властивості має порожній рядок — content: ''; . Нам там нічого не потрібно, але нам потрібна ця властивість для роботи псевдо-елемента.
Щоб створити трикутник, ми задаємо суцільну межу з деякою товщиною для порожнього прямокутника (без вмісту), без ширини та висоти, і колір буде лише біля однієї сторони кордону. Для отримання додаткової інформації ознайомтеся з наступним посібником:
4. Бульбашки!
Ми дісталися до суті. Зауважте, що content: attr(tooltip) каже, “Цей псевдо-елемент повинен використовувати значення атрибуту tooltip як контент.” Осьчому використання атрибутів замість назви класів є чудовим рішенням!
Зауважте, що значення z-index є для обох елементів і "dink", і бульбашки. Це довільні значення, але майте на увазі, що значення z-index є відносними. Пояснення: значення z-index: 1001 всередині елемента з z-index: 3 означає, що елемент 1001 буде найвищим елементом усередині цього контейнера з z-index: 3.
Властивість бульбашки z-index має бути як мінімум на 1 менше, ніж z-index у "dink". Якщо це значення таке ж або вище, ніж у "dink", ви можете зіткнутися з ефектом нерівномірного кольорового забарвлення "dink", якщо ви застосовуєте box-shadow для ваших підказок.
Щоб дізнатися докладніше про властивість z-index, погляньте на наступний посібник:
5. Взаємодія з дією
Наші підказки активуються під час наведення миші на елемент із підказкою… Майже.
Якщо ви повернетеся до нашого блоку зі стилями на Кроку 2, ви повинні побачити, що ми використовували opacity: 0; поряд з display: none; для частин нашої підказки. Ми зробили так, щоб використовувати ефекти анімації CSS при відображенні та прихованні підказки.
Властивість display не може бути анімована, а властивість opacity може! І насамкінець ми займемося анімацією. Якщо вас не цікавлять анімовані підказки, просто заберіть opacity: 0; на пункті 2 і не звертайте уваги на анімацію в пункті 7.
Останнє, що нам потрібно, все ще стосується всіх підказок — це спосіб придушити підказку, якщо вона не має вмісту. Якщо ви заповнюєте підказки деякою динамічною системою (Vue.js, Angular, або React, PHP і т.д.), нам не потрібні тупі порожні бульбашки!
6. Управління напрямком
Цей крок можебути досить складним, оскільки ми будемо використовувати деякі не настільки поширені селектори, щоб допомогти нашим підказкам визначитися з їхніми місцями розміщення на основі їхнього flow значень (або їх відсутності).
«У Колі-K відбуваються дивні речі» - Тед Теодор Логан
Перш ніж перейти до стилів, погляньмо на деякі шаблони селекторів, які ми будемо використовувати.
Це говорить браузеру: «Для всіх елементів з атрибутом tooltip, які або не мають атрибуту flow, або мають flow зі значенням, яке починається з “наверх”: застосувати ці стилі до свого псевдоніму :: before.
Ми використовуємо шаблон, так що вони можуть бути поширені на інші flow без необхідності повторювати CSS. Цей шаблон flow^="up" використовує співставник ^= (починається з). Це дозволяє стилям також застосовуватися до up-right та up-left (вправо-вгору та вліво-верх), ви можете захотіти використовувати такі напрямки. Ми не будемо описувати їх тут, але ви можете побачити, як вони використовуються в моїй оригінальній демонстрації підказки в CodePen.
Нижче наведено блоки CSS для всіх чотирьох напрямків, що розглядаються в цьому уроці.
Вгору (за замовчуванням):
7. Анімуємо все
Анімація просто приголомшлива штука. Анімація може:
- допомогти користувачам почуватися комфортно
- допомогти користувачам з просторовою орієнтацією у вашому інтерфейсі
- привернути увагу до речей, які потрібно побачити
- пом'якшити елементи інтерфейсу, які в іншому випадку мали б тільки різкий ефект увімк.
Наші підказки будуть підпадати під цей останній опис. Замість того, щоб спливати і миттєво вискакувати, давайте зробимо нашим текстовим бульбашкам легшийефект.
Нам знадобляться два види анімації @keyframe. Підказки вгору/вниз будуть використовувати keyframe tooltips-vert, а підказки вліво/вправо будуть використовувати keyframe tooltips-horz. Зверніть увагу, що в обох цих keyframe ми визначаємо тільки бажаний кінцевий стан підказок. Нам не потрібно знати, звідки вони з'являються (у підказках є інформація про стиль). Ми просто хочемо керувати тим, куди вони прямують.
Тепер потрібно застосувати ці keyframe до підказок, коли користувач наводить курсор миші на елементи з атрибутами [tooltip] . Оскільки ми використовуємо різні напрямки для керування відображенням підказок, нам необхідно визначити ці можливості в стилях.
Використовуйте :hover, щоб передати керування анімації
Пам'ятайте, що ми не можемо анімувати властивість display , але ми можемо дати підказкам ефект загасання, маніпулюючи opacity . Ми також анімуємо властивість transform, яка надає підказкам ледь помітного руху, начебто вони вилітають, вказуючи на їх тегування елементів.
Фантастична робота! Ми багато розповіли на цьому уроці, і тепер у нас є акуратна колекція підказок, що показують нашу напружену роботу:
Ми лише подряпали поверхню того, що можна робити за допомогою спливаючих підказок CSS. Повеселіться, пограйте з ними, продовжуйте експериментувати та вигадуйте свої власні рецепти!