CursorHelp

---------------------------------------------------------------------------------------

Demo:

Demo page / Демо страница

---------------------------------------------------------------------------------------

Разделы:

• Description / Описание
• How to use / Как использовать
• Design / Настройка внешнего вида
• Contact / Обратная связь
• Info / Информация

---------------------------------------------------------------------------------------

Description / Описание

• (En)

  Beautiful title on Jquery, Css and Html. This title is always visible on screen side, even if tag is located at the edge of the browser window. It is a beautiful replacement of the usual html title. It is also possible to format the appearance of each tooltip. (Google translator)

• (Ru)

  Оригинальный Title при наведении появляется рядом с курсором, красивая замена обычного title. Преимуществом является то, что подсказка видна при любых обстоятельствах. А также имеется возможность форматировать внешний вид каждой подсказки в html коде, сделать это можно используя уже готовые стили (решения) или добавив свои. Скрипт написал сам, не откуда не брал готовые решения, только использовал возможности языка javascript (Jquery). Стили написаны на языке CSS.

---------------------------------------------------------------------------------------

Как использовать

1. скачиваете файлы
2. закружаете их на свой сервер(хостинг)
3. подключаете документы 'cursorhelp.css' и 'cursorhelp.js' на каждой странице
4. • если Вы скачали версию 1.0, то вставте следующий код перед закрывающимся тегом </body> (где именно - не важно, главное, чтобы где-нибудь внизу и на всех страницах):
     <div id="cursorTitle">
<div class="TitleContent"></div>
<div class="TitleCorner true"></div>
</div>
   • Если у вас версия 1.1 или выше, то делать этого не надо, достаточно подключить скрипт к страницам.
5. Тем блокам, которые нуждаются в подсказках, добавте класс 'cursorTitle':
   

   ...

   <div class="cursorTitle"></div>
   или
   <p class="cursorTitle"></p>
   или
   <p>Это текст с <span class="cursorTitle">подсказкой</span></p>

   ...

   Теперь, элементы с таким классом имеют подсказочное окошко, но самой подсказки пока ещё нет.

6. Чтобы добавить содержание подсказке, нужно помимо класса 'cursorTitle' добавить атрибут 'data-title' и дать ему значение с текстом помощи, перевода (как на демо странице), проще говоря, того, чего пожелаете.
   <div class="cursorTitle" data-title="текст подсказки"></div>
   или
   <p class="cursorTitle" data-title="текст подсказки"></p>
   или
   <p>Это текст с <span class="cursorTitle" data-title="текст подсказки">подсказкой</span></p>

   ...

   Всё!.. Окошко с подсказкой есть, текст тоже..

7. А, нет... Это ещё не всё.. Забыл про внешний вид сообщений. Но это не обязательно, поэтому, если хотите узнать, как настроить дизай, то смотрите следующий раздел.

Спасибо за внимание!

---------------------------------------------------------------------------------------

Настройка внешнего вида:

Для настройки дизайна подсказок Вы можете использовать как свои классы, так и уже готовые (они хранятся в файле 'cursorhelp.css').

Как применять:

• Для начала создадим элемент с CursorHelp помощью (в примере это тег 'span'):

  ...

  <p>просто текст, <span class="cursorTitle" data-title="это сама подсказка">текст с подсказкой</span></p>

  ...

• Я уже упоминул, что для стилизации будут использоваться классы, отличие заключается в том, что эти классы нужно обарачивать не в атрибут 'class', а в атрибут 'data-ch-config'. Поэтому добавим его:

  ...

  <p>просто текст, <span class="cursorTitle" data-title="это сама подсказка" data-title="">текст с подсказкой</span></p>

  ...

• Теперь нужно лишь дать значение этому атрибуту. Я уже заготовил основные классы, используя которые вы можете изменить у подсказки: цвет фона, цвет текста, добавить тень тексту и блоку, изменить шрифт, прозрачность и закруглить углы у блока. Таблицу с этими классами Вы можете просмотреть ниже. Но я думаю, что вам будет удобнее использовать свои стили, а значит свои классы, тем более, что таким образом можно стилизовать все подсказки под свой дизайн, написав всего один класс и указав его во всех элементах помощи в атрибуте data-title. Если подсказки будут одного стиля, то предлагаю поступить проще и изменить деволтный дизайн в файле 'cursorhelp.css'.

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

  Примеры:

  ...

  <p class="cursorTitle" data-title="это текст подсказки">будет стандартный вид</p>
<p class="cursorTitle" data-title="это текст подсказки" data-ch-config="bgc-green fs-25 c-white bs-b ts-b opacity-08 br-20">будет настроенный вид, используются прилагающиеся классы</p>
<p class="cursorTitle" data-title="это текст подсказки" data-ch-config="yourClass">будет настроенный вид, используются ваш класс, только не забудте прописать его в CSS.</p>
<p class="cursorTitle" data-title="это текст подсказки" data-ch-config="yourClass yourClass2">будет настроенный вид, используются ваши классы, только не забудте прописать их в CSS.</p>

  ...

---------------------------------------------------------------------------------------

Contact / Обратная связь

Cвязаться с автором: аккаутн в [Google+](https://plus.google.com/114595254514911414836), страница на [FaceBook](https://www.facebook.com/SidMag27).

---------------------------------------------------------------------------------------

Info / Информация

Versions / Версии

• Версия 1.0 - первая версия скрипта, который был создан 18 августа и загружен на GitHub 21 авг.
• Версия 1.1 - обновление 24 августа. добавлять HTML код блока подсказок теперь не надо. достаточно подключить скрипт и стили.
• Версия 1.2 - обновление от (??.??.??). у подсказок можно убирать треугольник указывающий на курсор.
• Версия 1.3 - обновление от (??.??.??). возможность выбора между облегчённой версией или полной.

---------------------------------------------------------------------------------------