Всплывающие подсказки на CSS & JQuery + 7 примеров
↓ Также Вам будет интересно ↓
Красивые всплывающие подсказки CSS и JQuery, и не только одного стиля, а из 7 разных по вкусу и цвету вариантов. Эти всплывающие подсказки создавались при помощи CSS3, градиента (linear-gradient
), тени для объектов и тени для текста, при помощи селекторов :after
и :before
, и т.д. Также обязательно посмотрите ещё варианты анимационных всплывающих подсказок.
Каждая подсказка имеет свои стили, поэтому в эту подсказку можно добавить практически любой текст, в том числе и большой длины
Семь стилей подсказок
Есть семь стилей в настоящее время в этот пакет:
- сладкий цвет;
- мини подсказка;
- большая серая;
- ночной цвет;
- блестящий красный;
- мягкий голубой;
- большая желтая подсказка.
Все подсказки достаточно красивые и современные.
Некоторые мелочи, такие как закругление углов, тени и даже цвет, Вы можете изменить на свой вкус. Демонстрацию всплывающих подсказок приглашаю вас посмотреть по ссылке выше.
Техническая часть подсказок
Чтобы использовать любую их подсказок, Вам необходимо использовать подобную структуру html кода:
1 2 3 4 5 6 7 8 9 10 11 |
<!--Подключение стилей--> <link rel="stylesheet" href="/web-developer/jquery/sweet-tooltip.css"> <!--Ссылка всплывающей подсказки--> <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"> Ваш текст </a> <!-- Подключаем JavaScript --> <script type="text/javascript" src="/web-developer/jquery/jquery.js"></script> <script type="text/javascript" src="/web-developer/jquery/sweet-tooltip.js"></script> |
data-style-tooltip
: это атрибут HTML5, содержащий имя стиля.
data-text-tooltip
: это атрибут HTML5,, содержащие текст всплывающей подсказки, то есть то, что будет показано пользователю при наведении курсоры мыши.
Поскольку я использую :after
и :before
селекторы CSS3, чтобы добавить больше элементов для подсказки, любой элемент может быть присоединен к подсказке, но не контейнерный элемент, например такой как input
или image
.
Код JQuery
JavaScript включает mouseover
и mouseout
для каждой ссылки подсказки. При наведении курсора мыши, код будет захватывать значения данных: текст для всплывающей подсказки и значения стилей подсказки, проверит положение ссылки подсказки, а затем будет генерировать всплывающую подсказку содержащую эти атрибуты. Пока mouseout
будет скрыт, будет и удалена подсказка.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$('.sweet-tooltip').bind('mouseover', function() { tooltip = $(this); tooltipText = tooltip.attr('data-text-tooltip'); tooltipClassName = tooltip.attr('data-style-tooltip'); tooltipClass = '.' + tooltipClassName; if(tooltip.hasClass('showed-tooltip')) return false; tooltip.addClass('showed-tooltip') .after('<div class="'+tooltipClassName+'">'+tooltipText+'</div>'); tooltipPosTop = tooltip.position().top - $(tooltipClass).outerHeight() - 10; tooltipPosLeft = tooltip.position().left; tooltipPosLeft = tooltipPosLeft - (($(tooltipClass).outerWidth()/2) - tooltip.outerWidth()/2); $(tooltipClass).css({ 'left': tooltipPosLeft, 'top': tooltipPosTop }) .animate({'opacity':'1', 'marginTop':'0'}, 500); }).bind('mouseout', function() { $(tooltipClass).animate({'opacity':'0', 'marginTop':'-10px'}, 500, function() { $(this).remove(); tooltip.removeClass('showed-tooltip'); }); }); |
На этом этапе, кода достаточно, и он будет отлично выполнять свою функцию.
Заключение
Мы создали только семь цветовых стилей, но Вы можете создать свои, добавив соответствующие стили в sweet-tooltip.css
. Вот и все, думаю Вам было интересно!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко