Як зробити простими підказками на css3

Підказки є відмінним способом для виведення додаткової інформації за допомогою простого наведення курсору миші на текст або зображення. Їх можна використовувати, наприклад, для виведення назв картинок, опису посилань, або будь-який інший інформації, яка може бути корисна користувачеві вашого ресурсу. І ламати дизайн шаблон не потрібно.

Створимо просту розмітку для посилання. Визначимо для неї атрибут title. в якому буде міститися текст підказки, і клас:

Задамо базовий стиль для класу tooltip:

Тепер підказка виводиться в один рядок з посиланням з використанням відносного позиціонування. Тепер визначимо закруглені кути для блоку підказки та позиціонуємо її зверху посилання:

Закруглені кути створюються за допомогою атрибута border-radius. Колір тексту робимо білим. На завершення, ми позиціонуємо блок підказки і додаємо відступ.

Крім визначення стилів і позиціонування задаємо властивість content:

Тепер при наведенні курсору на посилання виводиться наша підказка згори. Але є одна проблема - інформація виводиться двічі: в нашій підказці і браузером за замовчуванням. Для усунення потрібно поміняти наш код HTML:

Для завершення потрібно додати стрілочку внизу підказки. Використовуємо псевдо-клас: before та стилі для рамки:

Для створення стрілки ми використовували трюк з рамкою: встановлюємо колір рамки зліва і справа прозорим і керованим шириною рамки. Також стрілка позиціонується під підказкою.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!