• Главная»
  • Уроки»
  • CSS»
  • Приятные всплывающие подсказки с использованием CSS3 и jQuery

Приятные всплывающие подсказки с использованием CSS3 и jQuery

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

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

Для текста подсказок будет использоваться атрибут HTML5 data-*. А основными преимуществами предлагаемого решения будут:

  • простота использования;
  • анимация с помощью CSS3.

demosourse

 

Разметка HTML

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

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

 

CSS

Для создания 3D вида подсказок используются следующие стили:

.tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
}

.tooltip-content {
        opacity: 0;
        visibility: hidden;
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;

        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        -moz-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-transition: bottom .2s ease, opacity .2s ease;
        -moz-transition: bottom .2s ease, opacity .2s ease;
        -ms-transition: bottom .2s ease, opacity .2s ease;
        -o-transition: bottom .2s ease, opacity .2s ease;
        transition: bottom .2s ease, opacity .2s ease;
        }

.tooltip-content:after,
.tooltip-content:before {
        border-right: 16px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
}

.tooltip-content:before {
        border-right-width: 25px;
        border-top-color: #555;
        border-top-width: 15px;
        bottom: -15px;
}

.tooltip:hover .tooltip-content{
        opacity: 1;
        visibility: visible;
        bottom: 30px;
}

 

jQuery

Код jQuery выполняет всю "грязную" работу. С помощью значения атрибута HTML5 data-tooltip он добавляет новый элемент в DOM: <span class="tooltip-content">, который анимируется с помощью CSS3.

$(document).ready(function(){
        $('[data-tooltip]').addClass('tooltip');
        $('.tooltip').each(function() {
                $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
        });

        if ($.browser.msie && $.browser.version.substr(0,1)<7)
        {
          $('.tooltip').mouseover(function(){
                        $(this).children('.tooltip-content').css('visibility','visible');
                  }).mouseout(function(){
                        $(this).children('.tooltip-content').css('visibility','hidden');
                  })
        }
});

IE6 требует специальных ухищрений, что видно в выше приведенном коде.

 

Поддержка браузерами

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

Совместимость с         браузерами

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/easy-css3-jquery-tooltips
Перевел: Сергей Фастунов
Урок создан: 7 Декабря 2011
Просмотров: 25020
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Декабря 2011 16:00
    Ygreec
    то, что надо, если это надо
  • 7 Декабря 2011 18:02
    IKLO
    Я конечно все понимаю, но где уроки по php, хочется кода, да и опрос на сайте не просто так ведь весит!
  • 7 Декабря 2011 18:08
    rubyx
    Приятно действительно! Интересно как двух-трёх строчный текст будет показывать как надо? :) наверно глупый вопрос задал, просто сейчас времени маловато у мня)) ... Спасибо.
    • 8 Декабря 2011 14:12
      TerribleZ
      двух-трёх строчный текст будет показывать как надо. Если нужно чтоб по ширине танулся - убираем width в классе .tooltip-content
  • 16 Декабря 2011 13:02
    zikky
    все на смайлик снизу, справа нажали?)
    • 25 Декабря 2011 11:43
      da_lamber
      Да, вообще шикарно
^ Наверх ^