И снова – здравствуйте!
В этой статье я хочу поделиться с Вами кодом, с помощью которого можно организовать простые, но достаточно приятные на вид, всплывающие подсказки для различных элементов на страничках ваших сайтов. В качестве примера я выбрал – ссылки, так как именно для них обычно требуются развёрнутые подсказки. Но ничто не мешает создать свои tooltips для других веб-элементов.
Несомненным плюсом рассматриваемых закладок является то обстоятельство, что для их создания не требуются никакие дополнительные скрипты и библиотеки – всё сделано с помощью стандартных средств CSS3.
Итак, как всегда, сначала создаём html-документ со следующей разметкой:
Подсказка CSS3
При наведении курсора на
ЭТУ
Это всплывающая подсказка в серых тонах
ссылку появится всплывающая подсказка в серых тонах.
При наведении курсора на ЭТУЭто всплывающая подсказка в желтых тонах
ссылку появится всплывающая подсказка в желтых тонах.
При наведении курсора на
ЭТУ
Это всплывающая подсказка в тёмно-серых тонах
ссылку появится всплывающая подсказка в тёмно-серых тонах.
При наведении курсора на
ЭТУЭто всплывающая подсказка в голубых тонах
ссылку появится всплывающая подсказка в голубых тонах.
При наведении курсора на
ЭТУЭто всплывающая подсказка в розовых тонах
ссылку появится всплывающая подсказка в розовых тонах.
В html-коде ничего сложного нет – это по сути обычные ссылки, с включенными в них элементами span, которые по существу и являются непосредственно самими подсказками. Кроме того, для примера, что помимо текста в подсказке может содержаться и графическая информация, в первую подсказку включен элемент img.
Далее определяем стили всех элементов в коде ниже, который помещаем либо в раздел head, либо присоединяем отдельным файлом. В данном коде также ничего супер-сложного и особенного нет. Только бы хотелось обратить внимание на стрелочки к подсказкам. Эти стрелочки реализованы с помощью пвсевдоклассов - .tooltip span:before и .tooltip span:after.
Вот и всё! :) До встречи в следующих статьях. Благодарю, что их читаете…
