В этой статье мы рассмотрим валидный способ создания всплывающей подсказки для HTML5-спецификации с уникальным дизайном, который можно задать через CSS-стили.
Очень часто стандартная подсказка, всплывающая при наведении от атрибута title не подходит для дизайна внешним видом. Да и если вам просто захотелось сделать подсказку более красивой, то наш способ для вас.
Для создания такой всплывающей подсказки мы будем использовать технологии jQuery, это будут два обработчика событий - наведение на элемент с подсказкой и событие, когда мышка перестает быть наведенной на него.
Для того, чтобы наш способ был валидным, мы будем задавать элементу, у которого нужно выводить всплывающую подсказку атрибут data-description, дело в том, что в HTML5 все атрибуты, с началом data- являются валидным способом задать свой специальный атрибут.
Сделаем заготовку разметки, где будет ссылка с всплывающей подсказкой:
Здесь всё стандартно - подключаем файл стилей, библиотеку jQuery, и наш скрипт, который будет отвечать за появление всплывающей подсказки.
Следующий шаг - написать стили для внешнего вида нашей всплывающей подсказки, вы можете изменять их по аналогии и задавать свой, уникальный вид:
Осталось добавить скрипт, который будет создавать внутри элемента с подсказкой блок с классом, стилизирующим этот блок и текстом из подсказки:
Результат проделанной работы вы сможете увидеть на Демо-странице:
А так же можете скачать файлы-примера:
Добавить комментарий
Авторизоваться с помощью: