Покроковий посібник із створення підказок із чистого CSS

Нещодавно я працював над коротким підручником про створення простих підказок із використанням чистого CSS (і без додаткових елементів HTML або JavaScript). Пізніше я використав цю техніку у своєму власному проекті і з’ясував деякі хитрощі, щоб вдосконалити її.

Ця стаття - покроковий підручник, який допоможе вам зрозуміти ці трюки CSS, щоб ви також могли робити підказки на чистому CSS.

В кінці цього допису ви будете знати, як додати підказку до будь-якого елемента, додавши простий атрибут.

Проблема

Мені потрібно було створити спеціальну підказку для мого проекту.

Я розпочав з гуглювання “CSS Tooltip Generator”. Я знайшов досить багато генераторів. Їх підхід полягав у тому, щоб додати проміжок з абсолютною позицією всередині елемента, для якого вам потрібна підказка.

Але у мене вже був інакше закінчений проект. Я не хотів повертатися назад і додавати всі ці елементи span у своєму проекті. Це займе час і ускладнить мій HTML. Мав бути кращий спосіб.

Нарешті, я знайшов на YouTube приголомшливий підручник про підказки. Розумний фокус, який він використовував, - це створення підказки за допомогою селекторів :: beforeта :: afterCSS. Ви можете подивитися відео тут.

Цей фокус був розумним і чистим, але недостатньо загальним.

Покращення рішення

У цій частині я зроблю цей трюк загальнішим, і ми дізнаємось більше про деякі властивості CSS. Ось, що ми в кінцевому рахунку хочемо мати можливість:

 click here !! 

Мало того, ми хочемо мати можливість легко вказати позицію підказки:

 click here !! 

Спочатку - як уже згадувалося у відео - ми додамо кнопку beforeта afterпсевдоелемент до кнопки.

::afterі ::beforeє псевдоелементами, які дозволяють вставляти вміст на сторінку з CSS до або після вмісту елемента. Вони працюють так:

div::after { content: “after”;}div::before { content: “before”;}

Результат виглядає приблизно так:

 before after 

Давайте пройдемося цим кроком

Крок 1: ми додамо такий атрибут підказки:

 click Me !!  

Нам потрібні ::afterі ::beforeпсевдоелементи. Це буде простий прямокутник із вмістом підказки. Ми створюємо простий прямокутник із CSS, додаючи межу навколо порожнього елемента, який ми створюємо за допомогою contentвластивості.

::beforeПсевдо-елемент використовується , щоб показати вміст підказки. Ми додаємо його до властивості contentта витягуємо значення атрибута підказки. Значенням вмісту може бути рядок, значення атрибута елемента, як у нашому прикладі, або навіть зображення з url(path/image.png).

Щоб це працювало, положення елемента кнопки повинно бути відносним. Іншими словами, положення всіх елементів всередині кнопки є відносно положення самого елемента кнопки.

Ми також додаємо кілька хитрощів для розташування, щоб зробити підказку в центрі із властивістю перетворення, і це результат.

Ось наш CSS:

Крок 2: ми просто граємо з ::beforeі ::afterпсевдо-елементами для створення позиції в підказці. Наша кнопка HTML буде виглядати так:

 click here !! 

Позиція підказки може бути: правою, лівою, верхньою або нижньою.

Крок 3 : на цьому останньому кроці ми додамо просту анімацію наведення до підказки.

Цей CodePen показує кінцевий результат (і ви можете натиснути, щоб переглянути остаточний код):

Якщо ви знайомі з React, перевірте мій пост:

Представляємо responsejs-popup? - Модалі, підказки та меню - все в одному

У цій статті йдеться про те, щоб дати вам простий огляд того, що ви можете зробити за допомогою реакцій-спливаючого вікна та як ефективно ним користуватися. H ackernoon.com

Дякуємо за читання! Якщо ви вважаєте, що інші люди повинні це прочитати, натисніть клавішу? кнопку, твіт і поділитися публікацією. Не забувайте стежити за мною на Medium, щоб отримувати сповіщення про мої майбутні публікації.

Читати більше історій //elazizi.com/