Креативим - тур по сайту знакомящий с возможностями сайта [dle all]

Наткнулся на шаблон в паблике под названием Zombie TV. Там увидел сиё явление - тур по сайту, который знакомит посетителя с его возможностями. Называется этот скрипт Joyride.

Решил поставить на свой сайт и заодно написать вам как сделать подобное.
Для начала решите нужно оно вам или нет, смотрите демо, скрипт работает через куки, чтоб отображаться раз в заданное время, поэтому чтоб просмотреть еще раз, очистите куки на том сайте.

Инструкция:
1. Скачиваем архив в самом низу и заливаем файлы в ваш шаблон в папки js и style.
2. Открываем main.tpl вашего шаблона и перед </head> вставляем

HTML:

<link href="{THEME}/style/joyride-2.1.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="{THEME}/js/jquery.cookie.js"></script>
        <script type="text/javascript" src="{THEME}/js/jquery.joyride-2.1.js"></script>

2. В main.tpl перед </body> вставляем

HTML:

<ol id="joyRideTipContent">
           <li data-class="info" data-button="Далее" data-options="tipLocation:left">Приветствую тебя, отаку. Предлогаю сделать небольшое путешествие по сайту. Сдесь у нас ультрасовременный слайдер с онгоингами, который меняет фон всего сайта при переключении</li>
           <li data-class="sector" data-button="Далее" data-options="tipLocation:bottom">Тут отображаются последние поступления аниме отсортированные по типу</li>
        <li data-class="filter" data-button="Далее" data-options="tipLocation:bottom">В этом блоке вы можете подобрать аниме по разным параметрам, таким как год выхода, жанр, страна и прочим</li>
           <li data-class="avatar" data-button="Закрыть" data-options="tipLocation:left">Предлогаю вам зарегистрироваться и самим изучить другие возможности нашего сайта</li>
        </ol>
<script type='text/javascript'>
(function($) {
  $(function() {
    $('#joyRideTipContent').joyride({
      autoStart : true,
      'cookieMonster': true, // true/false для использования cookie
      'cookieName': 'JoyRide', // имя кук
      'cookieDomain': false, //привязка кук к домену
      postStepCallback : function (index, tip) {
        if (index == 2) {
          $(this).joyride('set_li', false, 1);
        }
      },
      modal:true,
      expose: true
    });
  });
})(jQuery)
</script>

3. Настраиваем под свои нужды. Смотрим на код

HTML:

<li data-class="info" data-button="Далее" data-options="tipLocation:left">Приветствую тебя, отаку. Предлогаю сделать небольшое путешествие по сайту. Сдесь у нас ультрасовременный слайдер с онгоингами, который меняет фон всего сайта при переключении</li>
           <li data-class="sector" data-button="Далее" data-options="tipLocation:bottom">Тут отображаются последние поступления аниме отсортированные по типу</li>
        <li data-class="filter" data-button="Далее" data-options="tipLocation:bottom">В этом блоке вы можете подобрать аниме по разным параметрам, таким как год выхода, жанр, страна и прочим</li>
           <li data-class="avatar" data-button="Закрыть" data-options="tipLocation:left">Предлогаю вам зарегистрироваться и самим изучить другие возможности нашего сайта</li>

Это наши 4 подсказки, видим data-class - тут указываем класс блока на который будет наводиться подсказка, видим "Приветствую тебя, .... </li>" - это текст нашей подсказки.
Меняем на свои классы и свои подсказки по аналогии

HTML:

<li data-class="тут класс блока" data-button="Далее" data-options="tipLocation:bottom">тут пишем подсказку</li>

Часть кода tipLocation:bottom отвечает за месторасположение подсказки, значения могут быть left, right, bottom, top.

Все возможности скрипта описаны на сайте разработчика, тут