Table H-Tips 0.3 :: компактная альтернатива закреплению шапки и первого столбца таблицы :: jQuery-плагин, для вывода всплывающих подсказок к ячейке с информацией из шапки и первого столбца

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

Демо

Термины:

• Подсказки - всплывающие подсказки с содержимым из заголовка таблицы, для вывода которых и существует этот плагин.
• Обычная версия - Этот плагин. Такое уточнение требуется, так как существует "Xinha-версия" этого плагина, которая применяется не для таблиц на обычных страницах, а таблиц в WYSIWYG-Редакторе Xinha.
• Xinha-версия - Плагин, выполняющий те-же функции что и этот, но предназначенный для таблиц в WYSIWYG-Редакторе Xinha.
• Главный файл плагина:
  Для обычной версии: table-h-tips.js Для Xinha-версии: TableHTips.js

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

• Зайдите на страницу плагина на GitHub и ознакомьтесь с соглашением в файле LICENCE.md.
• Скачайте все файлы плагина с GitHub и поместите их в какой либо каталог на своём сайте.
• Обеспечьте подключение главного файла к каждой странице, на которой требуется работоспособность этого плагина.
• Убедитесь, что к странице подключён jQuery.
• Копируете и обеспечиваете доступность всех необходимых функций от inFlowia Lab. Список требуемых функций см. в раздел "ТРЕБУЕТ" в начале комментария к коду. Сами функции ищите в репозитории зависимостей.
• Назначте таблицам, для которых должны выводиться всплывающие подсказки, класс h_tips

Что нового:

• Переименован CSS-класс, при помощи которого происходит подключение: hTips -> h_tips.
• Подсказки теперь появляются не по наведению а по клику (теперь их можно вызвать и на мобильных устройствах).
• Всплывающие подсказки теперь прилипают к краям текущей ячейки, не закрывая её контент.
• Добавлено скрытие подсказок по таймауту (таймаут задаётся в shared JS в _DELAY).
• Добавлена тень, для визуального отделения от таблицы.
• Все переменные и классы переименованы в более_удобочитаемый_формат.
• Для удобства доработки, часть кода и стилей вынесены в отдельные файлы: table-h-tips-shared.js table-h-tips-shared.css Это разделяемые с обычной версией файлы. Если вы используете и обычную версию и Xinha-версию, то можете оставить эти файлы в единственном экземпляре, но если они будут лежать не в каталоге этого плагина, то в Xinha-версии потребуется указать для них путь в свойствах: SHARED_JS_PATH SHARED_CSS_PATH
• По клику на подсказку она закрывается (для возможности закрытия на мобильных).
• Cменена позиция с Fixed на absolute - по крайней мере при прокрутке по вертикали более удобно пользоваться с моб. устр. (подсказку теперь можно прокрутить по вертикали если она не поместилась на экран).
• Модуль теперь состоит из каталога а не из единственного файла.

Имейте в виду, что скрипт не сработает для таблиц в iframe, например для тех, что выводятся в WYSIWYG редакторе вроде Xinha. Для работы с ними потребуется другой плагин, подключаемый непосредственно к самому редактору.

Этот плагин будет полезен для страниц с гигантскими таблицами, вроде этой. Они обычно не помещаются на страницу и чтобы вспомнить, к чему относится текущая ячейка приходится постоянно крутить страницу вверх-вниз влево-вправо, чтобы посмотреть шапку или первый столбец.

Обычно в таких ситуациях прибегают к плагинам для закрепления на экране шапки и первого столбца и это решение вполне приемлемо до тех пор пока вы работаете на нормального размера мониторе, однако, когда такая таблица оказывается на экране мобильных устройств, работа с ней может оказаться от невыносимой до невозможной из-за постоянно занимающих экран первого столбца и строки. Для таких задач Table H-Tips 0.3 может оказаться гораздо более удачным решением, так как необходимая информация из шапки и первого столбца будет показываться по тапу на нужную ячейку и скрываться по тапу на любую из подсказок.

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

Работало на:

• jquery-3.3.1