Прості підказки на CSS3 і HTML5

55

Простые подсказки на CSS3 и HTML5

Часто запитують, який найпростіший спосіб реалізації підказок до посилань. Найпростіший, це не особливо заморочуючись з приводу зовнішнього вигляду підказок, використовувати вбудовані засоби браузерів, прописуючи атрибут title=”” посилання.
У той же час існує маса інших способів створення простих екранних підказок, про деякі з них я писав раніше, так і в «інтернетах» матеріалу по цій темі не мало. Сьогодні, поділюся ще одним, дуже простим рішенням для створення оформлених підказок до посилань, не використовуючи javascript, побудованих виключно на CSS3 і HTML5.
В даному методі, загалом-то, немає нічого нового, деякі властивості з’явилися ще в CSS2, а ось використовуваний в прикладі атрибут data-tooltip=””, є частиною HTML5. Особливо докладно весь механізм розписувати немає потреби, безпосередньо в коді CSS, прописав короткі коментарі до основним властивостями.

Варіант 1

Посилання з підказкою в Html буде виглядати наступним чином:

<a href="#" data-tooltip="Проста підказка на CSS3">посилання</a>

посилання

Варіант 2

Не очікував, що відразу після публікації статті у читачів виникнуть деякі питання, точніше один, але дуже навіть по справі. Спочатку питання здався мені якимось сумбурним (от і саме питання), але потім я подумав, чому б і ні, ситуації бувають різні і деколи виникає необхідність розмістити в підказці більш об’ємну інформацію. З першим варіантом, така схема не прокатувала, при розміщенні в підказці довгого тексту, вона(підказка) витягалася по горизонталі і виходила не дуже естетична картина. Можете перевірити в першому варіанті, додавши пару рядків в підказку.
Так от, поставив завдання виправити ситуацію, тобто зробити так, щоб при додаванні довгого тексту, тіло підказки залишалося в розмірах заданої ширини, і автоматом здійснювався перенесення рядків, і зробити це, без накопичення додаткового коду css
Особливо мудрувати і вигадувати не довелося, все давно і добре опрацьована, достатньо було змінити деякі властивості елемента data-tooltip і все.
Власне, що з усього цього вийшло, можете подивитися на живому прикладі, а натиснувши на пункт меню «CSS» в редакторі, побачите весь розклад по стилям, з короткими поясненнями.

Порівнявши обидва варіанти, дуже легко розібратися, зрозуміти різницю і сам принцип роботи даного методу. На мій погляд, другий варіант, вийшов простіше і до того ж більш функціональним. Спасибі NeedHate за його питання, не втомлюся повторювати — Разом все у нас вийде ))).
Працює метод у всіх браузерах, навіть IE8, нехай в силу своєї убогості і проігнорувавши властивість border-radius(заокруглення кутів), що зовсім не критично, видає підказки в кращому вигляді.
Сподіваюся, цей простенький фрагментом, кому-небудь стане в нагоді в якості шпаргалки, а з’являться питання, або нові ідеї в тему, пишіть в коментарях, обов’язково розглянемо і обговоримо.

З повагою, Андрій