Симпатичные всплывающие подсказки

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

 

HTML

Для формирования подсказок в HTML не нужно особенно напрягаться. Просто используем для ссылки атрибут title.

<a href="#" title="Hi, I'm a tooltip thingy.">link</a>

И при наведении курсора мыши на ссылку будет выскакивать желтый прямоугольник с текстом:

Не будем нарушать заведенный порядок. Наш код HTML будет в точности таким, как показано выше.

Конечно, желтый прямоугольник выбивается из стиля страницы. Может быть когда-нибудь такой теневой элемент DOM будет доступен для стилизации, но в наши дни ни в одном из браузеров нет такой возможности. Поэтому, мы будем использовать JavaScript, чтобы выдрать атрибут  title и сделать элемент <div> с такимм же текстом. Что позволит нам позиционировать/скрывать/показывать подсказку так, как нужно.

 

JavaScript: плагин jQuery

Будем использовать jQuery. Создадим плагин. Это отличный метод, так как вы можете использовать функционал для произвольно выбранных элементов или для цепочек.

Вызов плагин будет выглядеть следующим образом:

$("article a[title]").tooltips();

Пример будет создавать подсказки для всех ссылок с атрибутом title внутри элемента <article>. Вы можете использовать любой селектор.

Наш плагин будет делать следующее:

  1. Проходит в цикле каждую ссылку.
  2. Создавать (скрытый) элемент div.tooltip для каждой ссылки, текст в нем будет скопирован из атрибута title.
  3. Удалять атрибут title у ссылки (единственный способ избавиться от желтого выскакивающего прямоугольника).
  4. Когда курсор мыши наводится на ссылку...
  5. Позиционирует подсказку соответствующим образом и плавно выводит ее в область видимости.
  6. Когда курсор мыши покидает ссылку...
  7. Плавно выводит подсказку из области видимости.

Код с комментариями выглядит так:

// Используем немедленно выполняемый функцтор для безопасного применения $
(function( $ ) {

  // Создаем плагин
  $.fn.tooltips = function(el) {

    var $tooltip,
      $body = $('body'),
      $el;

    // Убеждаемся, что работаем с цепочкой
    return this.each(function(i, el) {
    
      $el = $(el).attr("data-tooltip", i);

      // Создаем DIV и добавляем его на страницу
      var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");

      // Позиционируем сначала на месте элемента
      var linkPosition = $el.position();

      $tooltip.css({
        top: linkPosition.top - $tooltip.outerHeight() - 13,
        left: linkPosition.left - ($tooltip.width()/2)
      });

      $el
      // Выкидываем желтый прямоугольник
      .removeAttr("title")

      // Курсор мыши наводится на объект
      .hover(function() {

        $el = $(this);

        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');

        // Переставляем подсказку в случае движения страницы, например, при изменении размера
        var linkPosition = $el.position();

        $tooltip.css({
          top: linkPosition.top - $tooltip.outerHeight() - 13,
          left: linkPosition.left - ($tooltip.width()/2)
        });

        // Добавляем класс для анимации через CSS 
        $tooltip.addClass("active");

        // Курсор мыши покидает объект
      }, function() {

        $el = $(this);

        // Временный класс для скрытия подсказки
        $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");

        // Удаляем все классы
        setTimeout(function() {
          $tooltip.removeClass("active").removeClass("out");
          }, 300);

        });

      });

    }

})(jQuery);

Пара примечаний: 1) Демонстрация имеет анимацию подсказок, которая не зависит от JavaScript. Анимация - это дизайн. Дизайн - это CSS. Поэтому все выполняется в CSS. 2) Один момент в дизайне заключается в том, что подсказка выводится и убирается проскальзыванием в одном направлении. В CSS добавлением и удалением одного класса и использованием трансформаций такую задачу не решить. Трансформация будет выполняться в обратном порядке при удалении класса. Но с помощью  setTimeout мы можем использовать временный класс и анимировать его.

 

Некоторая несемантичность кода

Добавление элементов div к документу не соответствует требованию семантичности. Они никак не связаны с ссылками.

Кроме того, смущение вызывает удаление атрибута title.

 

CSS

Указатель на подсказке будет сформирован без дополнительной разметки или изображений с помощью псевдо элементов и треугольников CSS. Хотя мы и планируем использовать псевдо элемент, но для него требуется реальный элемент разметки.  Таков будет служить элемент <div>, который вставляется кодом JavaScript для каждой ссылки. Псевдо элемент будет являться указателем. Он имеет тот же стиль. что и подсказка, только повернут на 45 градусов и обрезан родительским элементом:

А вот и сам код CSS:

.tooltip, .arrow:after {
  background: black;
  border: 2px solid white;
}

.tooltip {
  pointer-events: none;
  opacity: 0;
  display: inline-block;
  position: absolute;
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  margin-top: 20px;
  text-align: center;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  font-stretch: condensed;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  -webkit-box-shadow: 6px 5px 9px -9px black,
                      5px 6px 9px -9px black;
  -moz-box-shadow: 6px 5px 9px -9px black,
                   5px 6px 9px -9px black;
  box-shadow: 6px 5px 9px -9px black,
              5px 6px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}
.tooltip.active {
  opacity: 1;
  margin-top: 5px;
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
.tooltip.out {
  opacity: 0;
  margin-top: -20px;
}

Класс .active используется для вывода подсказки, а класс .out - для скрытия.

 

Некоторые особенности вывода демонстрации в браузере Opera

В Opera демонстрация не работает совсем, потому что подсказка позиционируется непосредственно над ссылкой и имеет непрозрачность равную 0. Чтобы исправить данный момент надо явным образом в JavaScript изменять свойство display (задавать ему значения block или none) или в CSS сместить их достаточно далеко, чтобы не мешать ссылкам принимать события нажатия кнопки мыши.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BaIgO--FTXs/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Симпатичные всплывающие подсказки | | 2012-06-19 12:01:14 | | Статьи Web-мастеру | | В данном уроке мы сделаем всплывающие подсказки. Результат будет выглядеть следующим образом: HTMLДля формирования подсказок в HTML не нужно особенно напрягаться. Просто используем для ссылки | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: