Установка скрипта «Всплывающие подсказки из тега "TITLE"»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: установка скрипта

Для начала установим обработчик события наведения, для этого переходим в:
Панель управления » Управление дизайном » Глобальные блоки: Нижняя часть сайта и вставляем в самый низ следующий код:

<script>
    $('i.retitle').hover(function() {
	w_name = $(this).attr('title');
	$(this).attr('title','').append('<div class="window"><div class="w_mess">' + w_name + '</div><div class="w_arrow"></div></div>'); 
	$('.window').fadeIn(500);
    }, function() {
	$(this).attr('title',w_name);
	$('.window').remove();
    });
</script>

Второй шаг: установка стилей

Далее необходимо установить стили, для этого переходим в:
Панель управления » Управление дизайном » Общие шаблоны: Таблица стилей (CSS) и вставляем следующий код:

i.retitle {font-style:normal;position:relative;color:#1abc9c;cursor:pointer;}
i.retitle .window {display:none;position:absolute;bottom: 15px;left:-10px;}
.window * {cursor:text;}
 .window .w_mess {font-style:normal;text-align:left;font-size:14px;line-height:16px;padding:10px;width:240px;background:#F46C68;border-radius:3px;color:#fff;}
.window .w_arrow {border-color: #F46C68 transparent transparent transparent;border-style: solid;border-width: 6px;margin-left: 12px;width:0px;height:0px;}

Информация о классах:

i.retitle – ссылка или другой элемени, при наведении на который появляется окошко подсказки;

i.retitle .window – стили внешнего контейнера окошка подсказки;
.window .w_mess – контейнер с текстом подсказки;
.window .w_arrow – конусный указатель под окошком

Третий шаг: настройка и использование

Чтобы назначить окошко подсказки к какому-либо слову в тексте или любому другому элементу, необходимо заключить его в HTML тег <i></i> с классом .retitle. В итоге получим примерно такую конструкцию:

<i class="retitle" title="Вот так будет выглядеть текст окошка">пример использования в тексте </i>

Помните, текст подсказки содержится в атрибуте title и если он будет пустым, то подсказка не будет содержать текста. Если скрипт заинтересует покупателей, то переработаю его в плагин с широкими настройками, включая возможность вывода в окно подсказок графики и прочих элементов.

Ниже представлены несколько вариантов цветового оформления окошек, по умолчанию они темно-серые. Для смены цветовой схемы необходимо установить соответствующие стили, как показано в шаге 2.
Красные:

i.retitle {font-style:normal;position:relative;color:#1abc9c;cursor:pointer;}
i.retitle .window {display:none;position:absolute;bottom: 15px;left:-10px;}
.window * {cursor:text;}
 .window .w_mess {font-style:normal;text-align:left;font-size:14px;line-height:16px;padding:10px;width:240px;background:#F46C68;border-radius:3px;color:#fff;}
.window .w_arrow {border-color: #F46C68 transparent transparent transparent;border-style: solid;border-width: 6px;margin-left: 12px;width:0px;height:0px;}

Зеленые:

i.retitle {font-style:normal;position:relative;color:#1abc9c;cursor:pointer;}
i.retitle .window {display:none;position:absolute;bottom: 15px;left:-10px;}
.window * {cursor:text;}
 .window .w_mess {font-style:normal;text-align:left;font-size:14px;line-height:16px;padding:10px;width:240px;background:#b2d237;border-radius:3px;color:#fff;}
.window .w_arrow {border-color: #b2d237 transparent transparent transparent;border-style: solid;border-width: 6px;margin-left: 12px;width:0px;height:0px;}

Светло-серые:

i.retitle {font-style:normal;position:relative;color:#1abc9c;cursor:pointer;}
i.retitle .window {display:none;position:absolute;bottom: 15px;left:-10px;}
.window * {cursor:text;}
 .window .w_mess {font-style:normal;text-align:left;font-size:14px;line-height:16px;padding:10px;width:240px;background:#edf1f2;border-radius:3px;color:#434343;}
.window .w_arrow {border-color: #ccc transparent transparent transparent;border-style: solid;border-width: 6px;margin-left: 12px;width:0px;height:0px;}

Синие:

i.retitle {font-style:normal;position:relative;color:#1abc9c;cursor:pointer;}
i.retitle .window {display:none;position:absolute;bottom: 15px;left:-10px;}
.window * {cursor:text;}
 .window .w_mess {font-style:normal;text-align:left;font-size:14px;line-height:16px;padding:10px;width:240px;background:#488BFA;border-radius:3px;color:#fff;}
.window .w_arrow {border-color: #488BFA transparent transparent transparent;border-style: solid;border-width: 6px;margin-left: 12px;width:0px;height:0px;}

На этом все! :)