Створення підказки за допомогою CSS
Ви, напевно, вже знаєте, що таке підказка.
Спливаюча підказка – це піктограма або текст, на який, якщо навести курсор миші, ми надаємо більше інформації у вигляді спливаючої підказки або вікна.
Зазвичай спливаючі підказки знаходяться у формах, але ви можете розмістити їх там, де користувачам потрібна додаткова інформація.
На наведеному вище зображенні коло зі знаком питання показує спливаючу підказку. Якщо навести курсор миші, ця спливаюча підказка дає більше інформації про типи символів, які має містити ваш пароль.
Ви можете отримати фреймворки для реалізації підказок на своєму веб-сайті, але здебільшого ці фреймворки використовують для цього JavaScript.
У цій статті ми навчимося відносно простим способом створювати спливаючі підказки , використовуючи лише CSS .
Перш ніж ми почнемо, остаточний файл HTML і CSS для реалізації підказки доступний у кінці цього блогу. Ми детально описали кожен елемент, який використовується в HTML і CSS для реалізації підказки найпростішим способом.
Повністю ознайомившись із цією статтею, ви зможете реалізувати функцію підказки на будь-якому веб-сайті, використовуючи лише HTML і CSS.
Отже, почнемо…
Ми почнемо зі створення простої сторінки HTML із запитом пароля.
Крок 1: Створення простої HTML-сторінки для відображення підказки
Ось основний HTML-код для сторінки форми ,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome CSS Tooltip</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<label>Password:</label>
<input type="password" />
<span class="tooltip">?</span>
</form>
</body>
</html>Як бачите, ми зв’язали наш файл «style.css» у наведеному вище html.
<link href="styles.css" rel="stylesheet" type=" text/css" />Ми створимо підказку за допомогою цього файлу CSS.
Ми використовуємо просту форму, щоб спробувати функцію підказки. Ця форма містить лише одне поле, позначене як «Пароль », оскільки ми використовуємо його лише для ілюстрації того, як працюють підказки.
<form>
<label>Password:</label>
<input type="password" />
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
</form>Ми використали клас «tooltip» для реалізації функції підказки за допомогою CSS. Це ми обговоримо в наступному розділі.
Крок 2: базові стилі CSS для нашої HTML-сторінки
Перш ніж створювати CSS для «tooltip», ми повинні створити деякі базові стилі CSS для нашої HTML-сторінки.
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}Це дасть HTML-сторінку з гарним зеленим фоном. Ми також вибрали білий шрифт verdana та колір шрифту.
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}Ми розташували форму «відносно», з максимальною шириною 600 пікселів і запасом 20%.
Formlabel{
font-size: 32px;
letter-spacing: 1px;
}Клас мітки форми призначений для визначення розміру шрифту та інтервалу між літерами для тексту мітки, який ми будемо використовувати.
forminput{
margin: 0 10px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #444;
}Тут у нас є стилі для поля форми. У цьому стилі немає нічого складного. Ми надали відповідні поля та відступи разом із визначенням розміру та кольору шрифту для полів форми.
Отже, це наші стандартні стилі CSS для нашої сторінки форми, які ми будемо використовувати, щоб продемонструвати, як реалізувати функцію підказки за допомогою CSS.
Давайте створимо підказку за допомогою CSS
Крок 4: Стиль CSS для підказки
Ви могли помітити, що ми використали клас ” tooltip " у нашому файлі html. Це стиль, який ми збираємося застосувати до знака питання («?»), який буде діяти як підказка.
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}Спочатку ми маємо розташувати підказку відносно, застосувавши «position: relative; ” стиль. Причина відносного позиціонування підказки полягає в тому, що пізніше в цьому методі ми будемо використовувати псевдоелементи, які можна позиціонувати «Абсолютно». Отже, ми хочемо, щоб ці псевдокласи «абсолютно» розташувалися відносно цього елемента.
Далі ми надаємо чорний колір фону для підказки за допомогою методу rgba(),
background: rgba(0,0,0,0.3);
де r,g,b позначає червоний, зелений і синій, а позначає «альфа », яка контролює непрозорість.
Ми додамо чорний фон нашому колу підказки та зменшимо його прозорість до 0,3, щоб зробити його схожим на темно-зелений колір.
Далі ми застосуємо деякі базові стилі відступу та радіуса рамки до знака питання («?»), щоб наша підказка виглядала добре.
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;За допомогою наведеного вище CSS ми застосовуємо доповнення до кола, що оточує «?», і робимо радіус кордону 100%, щоб зробити його повним колом.
Розмір шрифту визначає розмір «?» знак, який ми використовуємо як підказку в цьому прикладі.
Ми також додаємо ” cursor:help; ” у CSS це дасть знак питання під вказівником миші, коли ви наведете курсор на цей елемент, як показано на зображенні нижче.
Підказка містить певний вміст (у цьому прикладі ми надаємо більше інформації щодо символів, які слід включити в поле «пароль»).
Крок 5: надайте вміст підказки всередині HTML
Наступне завдання, яке стоїть перед нами, полягає в тому, куди розмістити цей вміст у підказці?
Щоб виконати це завдання, ми збираємося додати атрибут у файл HTML, який ми створили раніше.
<span class="tooltip">?</span>Тут ми не хочемо додавати жодної додаткової розмітки, як-от створення ще одного діапазону для додавання вмісту всередину підказки.
Ми можемо включити вміст підказки в цей діапазон.
Ми зробимо це, додавши атрибут «data ». Назва атрибута даних тут буде «підказка ».
<span class="tooltip" data-tooltip="">?</span>data-tooltip — наш атрибут даних, за допомогою якого ми додаємо вміст, який має відображатися всередині підказки.
Далі ми збираємося додати інструкції щодо символу, який має бути присутнім у паролі, всередині нашого атрибута data-tooltip.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>Тепер ми додали текст, який має з’явитися всередині підказки. Далі ми дізнаємося, як зробити так, щоб цей текст з’являвся в підказці, коли користувачі наводять курсор на знак питання.
Крок 6: Створення контейнера підказки за допомогою псевдоелементів
По-перше, нам потрібно створити контейнери, всередині яких має відображатися вміст підказки.
Щоб зробити це, давайте повернемося до файлу style.css і створимо псевдоелементи для класу .tooltip.
Ми збираємося створити псевдокласи ::after і ::before, щоб відобразити вміст нашої підказки.
По суті, використовуючи псевдоклас, наприклад ” ::after “, ви можете націлити позицію відразу після елемента, який використовує основний клас, і стилізувати цю позицію.
Так само, використовуючи псевдоклас ::before, ви можете стилізувати позицію безпосередньо перед елементом, де використовується головний клас (у цьому випадку «?» — це цей елемент).
Це дуже корисний псевдоклас для введення додаткового вмісту на сторінці.
Ми створимо псевдоклас для «tootlip», як показано нижче.
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
}Ми створюємо спільний клас для стилів ::before і ::after.
Тут ми точно розташували стилі ::before і ::after, тому що ми хочемо, щоб вони були розташовані над «знаком питання» і ми хочемо, щоб вони були по центру над «?».
Щоб розташувати спливаючу підказку по центру над «?» ми повинні використовувати «left:50%; ” атрибут.
Тепер ми використаємо ::before для стилізації маленького трикутника внизу підказки.
::after використовується для стилізації вмісту підказки .
Давайте подивимося, як це робиться.
Спочатку ми створимо маленький трикутник у нижній частині підказки.
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}Ми повинні використовувати вміст:””; атрибут, щоб показати, що цей елемент не має вмісту. Оскільки ми вставили деякий порожній вміст, тепер ми можемо його стилізувати.
Ми можемо створювати трикутники в CSS за допомогою атрибута border-width .
За цим рядком,
border-width: 10px 8px 08px;
Ми вказали, що ширина рамки вгорі становить 10 пікселів, справа – 8 пікселів, вниз – 0 пікселів і ліворуч – 8 пікселів.
Це створить для нас трикутник.
Далі ми створимо суцільну рамку для цього розділу та зробимо праву, нижню та ліву області прозорими, щоб було видно лише верхню область «трикутника».
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;Зробивши рамку суцільною, ми застосовуємо кольори для верхньої, правої, нижньої та лівої сторін рамки.
Ми повинні використовувати той самий ” border-color:rgba(); “, який ми використали для стилізації кола навколо знака питання.
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
Тут ми задали чорний колір (0,0,0) для верхньої частини рамки та зменшили її непрозорість до 0,3, щоб отримати темно-зелений колір, так само, як ми зробили для отримання стилю для кола навколо «?».
Ми зробили праву, нижню та ліву частини рамки прихованими, зробивши прозорим.
Навіть якби ми створили правий і лівий кордони, вони прозорі. Єдиною кольоровою межею є верхня межа. Це призведе до того, що прихована межа ліворуч і праворуч дасть нам ефект трикутника в поєднанні з кольоровою верхньою межею.
Кінцевий результат буде виглядати так.
Якщо ви зробите пошук Google за «i», ви дізнаєтесь про це більше.
Атрибути «Margin-left» і «top» використовуються для розміщення цього трикутника в центрі над колом.
top: -20px;
margin-left: -8px;Тепер ми створили трикутний хвіст у нижній частині підказки, який вказує на «?» знак.
Далі нам потрібно надати стилю округленій прямокутній області підказки, де відображається інформація. Для цього ми будемо використовувати атрибут ::after .
.tooltip::after{
content: "some text";
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}Тому я використовував,
content: "some text";
У початковому розділі псевдокласу .tooltip::after
Тепер нам потрібно надати цьому розділу той самий колір фону, який ми використовували для створення області трикутника (який є чорним, з альфа-прозорістю 0,3).
Тому я додав,
background: rgba(0,0,0,0.3);
Тоді я розташував цей розділ по центру, поставивши наш «знак запитання», як і раніше. Я використовую ширину 300 пікселів для округленого прямокутника та поле -150 пікселів, щоб центрувати його відносно знака питання.
top: -20px;
width:300px;
margin-left: -150px;Тепер ми додамо відступи та закруглимо краї прямокутника (застосувавши border-radius).
border-radius: 10px;
color: #fff;
padding: 14px;Це також встановить білий колір тексту всередині округленого прямокутника (#fff).
Тепер округлена прямокутна область, яка відображає вміст, готова. Але все ж він неправильно розміщений. Поточна HTML-сторінка виглядатиме так, як показано нижче.
В основному округлений прямокутник накладається над областю «трикутник», яку ми створили, оскільки ::before і ::after використовують однакові поля та розміщуються на 20 пікселів над знаком питання.
Нам потрібно розташувати заокруглений прямокутник прямо над трикутною секцією, яку ми створили раніше, щоб вони обидва разом відображалися як вікно чату.
Ми не знаємо, яка точна висота округленого прямокутника, щоб розмістити його над трикутником, ми хочемо трансформувати 100% висоти округленого прямокутника по вертикалі, щоб він розташувався прямо над трикутником.
Оскільки обидва ці елементи (трикутник і прямокутник із закругленими кутами) використовуються top: -20px;, нам просто потрібно перетворити верхню частину прямокутника з округленими кутами вертикально на висоту пікселя, що дорівнює його власній висоті.
Для цього ми використовуємо,transform: translateY(-100%);
Тепер ми маємо правильну структуру, яка виглядає як інформаційний ящик.
Крок 7: Отримання фактичної інформації в підказці
Наше останнє завдання полягає в тому, щоб отримати правильний вміст, який містить більше інформації, у підказці.
Пам’ятайте, що ми розмістили вміст, який повинен з’явитися в підказці, у нашому HTML-файлі.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>За допомогою CSS ми можемо отримати атрибут з елемента HTML. Ми збираємося зробити це за допомогою attr() у .tooltip::after псевдо CSS.
Отже, замість того,content: "some text";
Ми збираємося використовуватиcontent: attr(data-tooltip);
Тут «data-tooltip» є нашим атрибутом HTML.
Використовуючи атрибут, який ми надали для вмісту в HTML, ми зможемо викликати цей вміст і показувати всередині нашого псевдо CSS. Результат цього буде таким, як показано нижче,
Зараз. все, що нам потрібно зробити, це зробити нашу підказку невидимою на початку та з’являтися лише тоді, коли користувачі наводять курсор на знак питання (?).
Це дуже легко зробити.
Щоб зробити підказку невидимою на початку, ми зробимо її прозорість «0» у наступному псевдо CSS, який ми написали раніше.
.tooltip::before .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
}Для ефекту наведення ми додамо новий псевдо CSS внизу нашого файлу style.css. Давайте зробимо непрозорість «1» для наведеного стану, щоб спливаюча підказка відображалася лише при наведенні.
/* CSS for Hover effects */
tooltip:hover::before.tooltip:hover::after{
Opacity:1;
}Цей псевдо CSS визначає лише наведений стан, оскільки ми використали «:hover» після основного CSS .tooltip
Тепер наша підказка CSS готова.
Але перехід спливаючої підказки буде не таким плавним, як ви очікували.
Ви можете зробити ефекти переходу ще кращими за допомогою CSS. Для цього вам просто потрібно додати наведене нижче правило переходу в CSS для псевдокласів ::before і ::after.
Щоб дізнатися більше про стилі переходів, які можна зробити за допомогою CSS, прочитайте нашу статтю «CSS-анімації та переходи ».
.tooltip::before.tooltip::after {
transition: all ease 0.3s;
}Цей процес набагато легший і менш складний порівняно з реалізацією спливаючої підказки за допомогою JavaScript.
Для довідки знайдіть остаточний файл HTML і CSS, щоб попрактикуватися в цьому.
Остаточний файл HTML для тестування підказки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Tooltip</title>
<link href="styles.css"rel="stylesheet"type="text/css" />
</head>
<body>
<form>
<label>Password:</label>
<input type="password" />
<span class="tooltip"data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
</form>
</body>
</html>Остаточний файл CSS Створення підказки
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
formlabel{
font-size: 32px;
letter-spacing: 1px;
}
forminput{
margin: 010px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #fff;
}
/* --------- Tooltip Styles ---------- */
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
transition: allease0.3s;
}
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
.tooltip::after{
content: attr(data-tooltip);
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
/* Hover states */
.tooltip:hover::before, .tooltip:hover::after{
opacity: 1;
}Жива демонстрація
Подивіться підказку Live CSS у дії.