Підказка з власним стилем, використовуючи тільки html css

Теги: css, html, css3

У цій статті ми розповімо про те, як зробити красиву підказку тільки засобами HTML і CSS.

Відразу обмовимося, цей метод буде працювати тільки для подвійних тегів (які мають відкриває і що закривають теги).

Суть буде полягати в тому, що всередину тега, якому необхідно додати підказку з унікальним дизайном ми будемо розміщувати прихований блок, який буде з'являтися при наведенні.

Підготуємо розмітку для прикладу:

І відповідні стилі:

Начебто ось і все, але у цього способу є дуже багато недоліків, деякі з них:

1. Якщо на сторінці буде два однакових елемента з такою підказкою, то при наведенні з'являться всі підказки (вирішується - додаванням кожному елементу унікального класу, як наслідок збільшується html і css код)
2. Задати відображення підказки в правому верхньому куті, щодо тексту можна, тільки якщо батьківський блок підказки займається повністю текстом (рішення - підганяти блоки по ширині під текст, наприклад div).

Але спосіб добре працює, наприклад для посилань (вони стискаються за текстом), а якщо вам потрібно зробити підказку тільки для однієї або нескольки посилань, то він так само цілком підійде, чи не наповнюючи код зайвими класами і селекторами.

Приклад ви можете подивитися на демо-сторінці: