Спливаюча підказка

9 червня 2022 р.1904

Підказкою називається блок із текстом, який з'являється при наведенні на елемент веб-сторінки (мал. 1). Мета такої підказки дати більш докладну інформацію про вміст елемента. Наприклад, для посилань підказкою може бути адреса посилання або короткий опис сайту, на який веде посилання.

Вигляд спливаючої підказки

Мал. 1. Вигляд спливаючої підказки

Для створення підказки в HTML додамо до потрібного елементу атрибут користувача data-tooltip з текстом підказки.

<code data-language="html"><p data-tooltip="Спливаюча підказка">…</p>

Виведення тексту та його оформлення далі доручається CSS. Саме відображення вмісту атрибуту відбувається через властивість content. Додаємо його до псевдоелементу ::after, який прив'язуємо до селектора [data-tooltip] — це дозволяє створювати підказку для будь-якого елемента.

[data-tooltip]::after { content: attr(data-tooltip); /* Виводимо текст */
}

Колір фону, тексту, розміри та положення підказки також задаються в ::after. Заодно приховуємо підказку, роблячи її прозорою через властивість opacity.

[data-tooltip]:: after { opacity: 0; }

Там же встановлюємо час переходу за допомогою властивості transition.

[data-tooltip]::after { transition: 1s; }

Псевдоелемент ::after є частиною свого батька, так що :hover починає спрацьовувати при наведенні не на рядок, а на невидиму підказку. Запобігти взаємодії курсора миші з підказкою можна за допомогою pointer-events зі значенням none.

[data-tooltip]::after { pointer-events: none; }

Щоб підказка відображалася, плавно стаючи непрозорою, додамо до :hover властивість opacity зі значенням 1.

[data-tooltip]:hover::after { opacity: 1; }

Сюди ж можна додати й інші властивості, на зразок left та top. Тоді підказка не тільки ставатиме видимою, а й трохи переміщатиметься. У прикладі 1 показаний остаточний код для створення спливаючої підказки при наведенні на абзац.

Приклад 1. Створення підказки

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover</title> <style> [data-tooltip] {position: relative; /* Відносне позиціонування */
} 
[data-tooltip]::after { content: attr(data-tooltip); /* Виводимо текст */
position: absolute; /* Абсолютне позиціонування */
width: 300px; /* Ширина підказки */
left: 0; top: 0; /* Положення підказки */
background: #3989c9; /* Синій колір фону */
color: #fff; /* Колір тексту */
padding: 0.5em; /* Поля навколо тексту */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметри тіні */
pointer-events: none; /* Підказка */
opacity: 0; /* Підказка невидима */
transition: 1s; /* Час появи підказки */
} 
[data-tooltip]:hover::after { opacity: 1; /* Показуємо підказку */
top: 2em; /* Положення підказки */
}
</style>
</head>
<body> <p data-tooltip="Підказка, що спливає, повідомляє про щось багатозначне і корисне..."> Наведи курсор.</p>
</body>
</html>

Див. також