CursorHelp.js

CursorHelp - это универсальный помощник для посетителей вашего сайта. Его преимуществом является то, что он может вписаться в дизайн любого проекта, так как Вам предоставляется возможность управлять внешним видом отдельно взятой подсказки, определённой группы, а также дизайном всех подсказок.

Скачать

Версия: 1.1 Проект на GitHub Автор: Магомедов Саид

Примеры

Если вы не будете применять дополнительных стилей, то подсказка будет иметь стандартный вид:
наведи курсор на меня!

Но если вам нужно изменить дизайн, то этого можно легко добиться.

К примеру, можно изменить фон каждой подсказки. Наведите курсор на следующие блоки и посмотрите на изменения.

Пример 1.1 Пример 1.2 Пример 1.3 Пример 1.4 Пример 1.5 Пример 1.6 Пример 1.7 Пример 1.8

Вы можете добавить тень блоку.

Тень Тень Тень Тень Тень Тень Тень Тень 0X Тень 1X Тень 2X Тень 3X Тень 4X Тень 5X Тень 6X Тень

Нужно изменить цвет текста, не проблема.

Пример 2.1 Пример 2.2 Пример 2.3 Пример 2.4 Пример 2.5 Пример 2.6 Пример 2.7 Пример 2.8 Пример 2.9 Пример 2.10 Пример 2.11

Можно добавить подсказкам прозрачности.

Не прозрачность 90% Не прозрачность 80% Не прозрачность 70% Не прозрачность 60% Не прозрачность 50% Не прозрачность 40% Не прозрачность 30% Не прозрачность 20% Не прозрачность 10%

Если размер шрифта должен отличаться от общего его значения, то есть возможность повлиять и на это.

Шрифт 8px Шрифт 10px Шрифт 13px Шрифт 15px Шрифт 18px Шрифт 20px Шрифт 23px Шрифт 25px Шрифт 30px

Ко всему прочему, можно изменять степень закругления границ.

Закругление 0px Закругление 3px Закругление 5px Закругление 8px Закругление 10px Закругление 15px Закругление 20px Закругление 25px Закругление 50%

Тень можно задать не только блоку подсказки, но и тексту, который он содержит.

Тень у текста Тень у текста Тень у текста Тень у текста Тень у текста Тень у текста Тень у текста Тень у текста

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

Для того, чтобы подключить этот плагин, вам нужно:

  1. скачать файлы 'cursorhelp.js' и 'cursorhelp.css'
  2. загрузить их к себе на сервер
  3. подключить их в <head>-е каждой страницы

Для того, чтобы использовать скрипт, нужно:

  • Добавить класс со значением 'cursorTitle'
    • class="cursorTitle"
  • Добавить атрибут data-title со значением текста подсказки
    • data-title="текст подсказки"
  • Добавить атрибут data-ch-config со значением классов для стилизации
    • data-ch-config="bgc-green bs-b"

А теперь более подробно.

  1. добавить класс cursorTitle блокам, которые нуждаются в подсказочном окошке.

    2. Пример:

    ...
    <p class="cursorTitle">блок с подсказкой 1</p>
    <p>блок без подсказки</p>
    <div class="cursorTitle">блок c подсказкой 2</div>
    ...

    Результат:

    блок с подсказкой

    блок без подсказки

    блок c подсказкой 2

  2. Добавте атрибут data-title c содержанием подсказки.

    3. Пример:

    ...
    <p class="cursorTitle"data-title="я - подсказка CursorHelp">блок с подсказкой 1</p>
    <p>блок без подсказки</p>
    <div class="cursorTitle" data-title="я - могу содержать <strong>HTML</strong> код,<br>проверь и поверь...">блок c подсказкой 2</div>
    ...

    Результат:

    блок с подсказкой

    блок без подсказки

    блок c подсказкой 2

  3. Если вы хотите изменить стандартный вид CursorTitle, то добавить атрибут data-ch-config. Содержание этого атрибута - это классы. Подключив файл 'cursorhelp.css' к своему сайту, даёт вам возможность пользоваться готовыми решениями, которые вы могли видеть в разделе "примеры". Как это работает? Дайте значение bgc-green атрибуту data-ch-config и фон подсказки станет зелёным. Добавте атрибуту, через пробел значение, ещё одно значение fs-25, через пробел значение, и размер шрифта подсказки станет равен 25px. Дополнительно добавив c-white, получим белый цвет у текста. Добавим тень блоку и тексту дописав bs-b и через пробел ts-b. А теперь посмотрим на результат: наведи курсор на меня. Окончательным штрихом станут прозрачность и закруглённые уголки. Прозарчность - opacity-08, а закруглённые уголки - br-20px.

    4. В итоге можно получить меня

    Таблицу всех значений с расшифровкой можно найти здесь.

  4. Вы можете использовать свои классы. Для этого нужно атрибуту 'data-title' дать значение вашего класса, а уже в своём файле со стилями или в файле 'cursorhelp.css' дать этому class-у свои значения.

    5. Пример:

    Код HTML

    ...
    <p class="cursorTitle" data-title="текст подсказки" data-ch-config="myClass">тег с подсказкой</p>
    ...

    Стили CSS

    ...
    .myClass{
      box-shadow:2px 4px 3px 2px #eb1;
      color:#eb1;
      border-widht:2px 5px;
      opacity:0.85;
      font-size:16px;
      ...
    }
    ...

Лицензия

Данный скрипт распространяется по лицензии MIT ( X11 License )

Текст лицензии гласит, что вы имеете право безвозмездно использовать этот продукт без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий продукта, также как и лицам, которым предоставляется данный продукт, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

Чтобы более подробно ознакомится с лицензией, нажмите сюда или сюда