Создаем всплывающие подсказки на CSS
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

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

И так что такое "всплывающие подсказки" - это текст или картинка которые отображаются при наведении указателя мыши на ссылку или другой какой то элемент на странице, если в атрибуте title есть ее описание.

Всплывающую подсказку Вы можете применять как для ссылок, так и для любых изображений.

В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:

И выводится она стандартным системным методом при помощи атрибута title, без оформления код ссылки из всплывающей подсказкой выглядит так:

Но как мы уже говорили изначально мы будем делать эти всплывающие подсказки более симпатичными ,и будем использовать код css, сегодня мы постараемся рассмотреть три варианта всплывающих подсказок.

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

 

Вариант всплывающей подсказки первый, в нем мы будем добавлять подсказку на фотографию в самом низу при наведении указателя мыши.

Для выполнения данного действия мы будем использовать два атрибута: image, И для того чтоб наша подсказка работала after и data-text для вывода текста всплывающей подсказки.

Пример стилей CSS для данного варианта всплывающей подсказки:

Ну и сам HTML код выглядит так:

А вот примерно такой результат у нас получится:

Но для ссылок такой вариант всплывающей подсказки не подойдет конечно же ,значить будем использовать немного другие методы вывода нашей подсказки. И в первом методе мы выведем всплывающую подсказку именно над нашей ссылкой.

Пример кода CSS Ниже:

А для нашей ссылки с подсказкой делаем такой код:

Ну и результат у нас получится такой:


Наведи курсор сюда

Ну и последний третий вариант - Выводить нашу всплывающую подсказку будем под ссылкой, в принципе он похож на предыдущий но немного другой дизайн и вывод под ссылкой.

Пример CSS кода:

Ну и соответственно html-код для ссылки:

И результат у Вас должен будет получится как на примере ниже:


Наведи курсор сюдаТекст всплывающей подсказки

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

Вас также может заинтересовать

Нет комментариев

Вы можете оставить комментарий первым.

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

Пожалуйста, введите Ваше имя. Пожалуйста, введите действительный адрес электронной почты. Пожалуйста, введите сообщение.