Всплывающие подсказки к ссылкам на CSS

Автор: Илья Остапенко /

Всем привет! Сегодняшним CSS уроком, будет добавление всплывающих подсказок к ссылкам с помощью CSS. Данный трюк очень красиво и эстетично выглядит на всех сайтах, которые я видел. Зачем использовать подсказки к ссылкам, решать только вам, но подобные подсказки можно использовать не только к ссылкам, а так, же делать небольшие определения к различным словам. Давайте покажу и расскажу на примере.Всплывающие подсказки к ссылкам на CSS

Для начала как обычно, давайте рассмотрим код всплывающей подсказки:


До параметра width:120px; установлены настройки для скрытия окна с подсказкой, и если вы надумаете редактировать код, то не вздумайте менять что-то до width. Если вы разбираетесь в CSS, то с легкостью сможете переделать внешний вид всплывающей подсказки, изменив цвета и размеры, по вашему желанию.

Вы так же можете создать другой класс и сделать другое оформление для всплывающей подсказки. Таким образом, вы можете создать несколько разных классов, которые будут выводить информацию разного типа. А чтобы отображать разную информацию нужно будет указать соответствующий класс ссылки. Например:

Как видите, нет ничего сложного в создании всплывающих подсказок к ссылкам, особенно если использовать шаблон из данного урока. Так же думаю, вам будет полезно почитать о том, как прижать футер к низу страницы.

Оставить комментарий

Это не спам.