Всплывающие подсказки на CSS & JQuery + 7 примеров | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryВсплывающие подсказки на CSS & JQuery + 7 примеров
Дата: 20.05.2013 в 23:29 | Просмотров: 6445

Всплывающие подсказки на CSS & JQuery + 7 примеров

всплывающие подсказки на css
Скачатьбесплатно с сервера
Демодемонстрация

Красивые всплывающие подсказки  CSS и JQuery, и не только одного стиля, а из 7 разных по вкусу и цвету вариантов. Эти всплывающие подсказки создавались при помощи CSS3, градиента (linear-gradient), тени для объектов и тени для текста, при помощи селекторов :after и :before, и т.д. Также обязательно посмотрите ещё варианты анимационных всплывающих подсказок.

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

Семь стилей подсказок

Есть семь стилей в настоящее время в этот пакет:

  • сладкий цвет;
  • мини подсказка;
  • большая серая;
  • ночной цвет;
  • блестящий красный;
  • мягкий голубой;
  • большая желтая подсказка.

Все подсказки достаточно красивые и современные.

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

Техническая часть подсказок

Чтобы использовать любую их подсказок, Вам необходимо использовать подобную структуру html кода:

data-style-tooltip: это атрибут HTML5, содержащий имя стиля.

data-text-tooltip: это атрибут HTML5,, содержащие текст всплывающей подсказки, то есть то, что будет показано пользователю при наведении курсоры мыши.

Поскольку я использую :after и :before селекторы CSS3, чтобы добавить больше элементов для подсказки, любой элемент может быть присоединен к подсказке, но не контейнерный элемент, например такой как input или image.

Код JQuery

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

На этом этапе, кода достаточно, и он будет отлично выполнять свою функцию.

Заключение

Мы создали только семь цветовых стилей, но Вы можете создать свои, добавив соответствующие стили в sweet-tooltip.css. Вот и все, думаю Вам было интересно! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко


Добавить комментарий