Информеры или подсказки в LS на jQuery

Собственно прочитал пост про, то чегож не хватает в шаблонах и решил описать возможное решение пункта №2, а именно:
К каждому объекту на ЛС можно было бы добавить справку, например в виде значка ?, при наведении указателя мыши на который выводилась бы краткая справка в попап окне для чего нужен тот или иной блок/элемент.
И так, приступим.
У нас LS ведь дружит с jQuery, вот и им и будем пользоваться.
По сути дела знаю два способа вывести подобные подсказки, оба способа нельзя назвать простыми, но расскажу и покажу суть, может кто потом воспользуется.
Способ номер РАЗ… информеры
Начнем с приветствия:
Окно выводится при попадании на главную страницу сайта.
<script type="text/javascript">
	guider.createGuider({
		id:          "first",
		title:       "Подсказки с помощью jQuery",
		description: "Подсказки позволяют указывать на определенные части веб-интерфейса. Это окошко, например, показывает приветственное сообщение.",
		overlay:     true,
		width:       500
	}).show();
</script>


Но нам нужно привязать подобные подсказки к элементам веб-интерфейса на сайте.
Сделать это можно указав элемент в параметре attachTo в таком виде:
<script type="text/javascript">
	guider.createGuider({
		id:          "second",
		attachTo:    "#container",
		title:       "Можно привязать подсказки к любым элементам сайта",
		description: "Эта подсказка привязана к форме входа на сайт при закрытом режиме, выводится сверху(12часов)",
		position:    12
	});
</script>


Ну а теперь представим ситуацию, что хатим новому пользователю показать все что есть на странице…
Нам понадобится цепочка таких подсказок. Что бы их выводить в определенной последовательности понадобится указать ID Подсказки в параметре next для текущей:

<script type="text/javascript">
	guider.createGuider({
		id:          "first",
		title:       "Подсказки с помощью jQuery",
		next:        "second",
		description: "Подсказки позволяют указывать на определенные части веб-интерфейса. Это окошко, например, показывает приветственное сообщение.",
		buttons:     [{ name: "Далее", onclick: guider.next }],
		overlay:     true,
		width:       500
	}).show();

	guider.createGuider({
		id:          "second",
		attachTo:    "#container",
		title:       "Можно привязать подсказки к любым элементам сайта",
		description: "Эта подсказка привязана к форме входа на сайт при закрытом режиме, выводится сверху(12часов, есть варианты снизу-6, слева - 9, справа - 3)",
		buttons:     [{ name: "Закрыть", onclick: guider.hideAll }],
		position:    12
	});
</script>


С помощью параметра buttons, ВЫ можете добавить нужные вам кнопки в информер. Параметр buttons принимает в качестве аргумента массив объектов, каждый из которых содержит обязательные параметр name и необязательный onclick. Вот так, например, можно добавить «Далее» и «Закрыть» к информеру:

<script type="text/javascript">
	guider.createGuider({
		id:          "second",
		attachTo:    "#container",
		title:       "Можно привязать подсказки к любым элементам сайта",
		next:        "third",
		description: "Эта подсказка привязана к форме входа на сайт при закрытом режиме, выводится сверху(12часов, есть варианты снизу-6, слева - 9, справа - 3)",
		buttons:     [{ name: "Закрыть", onclick: guider.hideAll },
		              { name: "Далее", onclick: guider.next }],
		position:    12
	});
</script>

По поводу второго варианта, чуть позже напишу.

UPD
Собственно по второму способу.

Если нам не нужны такие сложные путеводители по сайту, как описанный выше, то можно сделать нечно проще, штуковина похожа на параметр title в имиджах, при наведении курсора на картинку получаем Название… кстати тот же титл можно присобачить к кнопкам при желании и не заморачиваться с jQuery, но это смотрится не красиво.

Как это работает:
Применяем jQuery анимацию эффекта mouseover и mouseout

Для этого нам понадобится:
1. Создать отдельный стиль, в который мы будем заворачивать те объекты которые нуждаются во всплывающих подсказках.
2. Написать код анимации jQuery
3. Собственно обернуть нужные части интерфейса этим стилем.

Начнемс… создаем класс bubbleInfo в CSS
.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none; /* keeps the popup hidden if no JS available */
}

Это минимальный вариант, но каждый может настроить под себя.

Собственно код jQuery реализующий эту анимацию:
$(function () {
  $('.bubbleInfo').each(function () {
    // опции
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // подрубаем mouseover и mouseout
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // отрубаем функцию сворачивания подсказки если мы перешли от триггера к элементу popup
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // не показывать анимацию если ее уже показали или она еще работает
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // Сбрасываем положение всплывающего окна
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // возвращает popup назд для просмотра
        })

        // Мы используем цепочки подсказок, теперь прописываем их непрозрачность и позицию
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // если подсказка уже сработала, то подключаем переменные
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // Сбрасываем таймер, это позволит избежать дублирования анимации
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // Ставим таймер на эффект, так что при убирании курсора эффект исчезает.
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          shown = false;
          //Скрываем наш popup после того как он сработал
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});


Оборачиваем им нужный нам объект, при наведении на который появится всплывающая подсказка
<div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
    <!-- your information content -->
  </div>
</div>
</div>


возможно кривовато написал, поправьте если что.

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

avatar
Пример как это работает — было бы здорово)
avatar
Ок, сделаю на днях.
avatar
Вы молодец что оперативно так отреагировали
avatar
возможно кривовато написал, поправьте если что.
Ссылку бы на плагин хорошо бы.
avatar
Реализовать бы это ещё в виде плагина с настройками, цены бы не было)
avatar
Скажите. Где можно посмотреть на пример как это работает?
avatar
Как я понял это что-то вроде этого: link1 или link2
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.