TL:DR Возможно, вам не нужно столько сторонних библиотек, сколько вы думаете. Мы создали собственную библиотеку всплывающих подсказок: https://github.com/mailmangroup/kawo-tooltip/

К июню 2014 года уменьшенный javascript для приложения KAWO вырос до более чем 600 КБ. Это не было катастрофой, но она не должна была быть такой большой. Одна из причин его роста заключалась в том, что мы включали слишком много сторонних javascript-библиотек и в каждом случае использовали только небольшой процент функций. Нам нужно было быть более осторожными при добавлении новых функций.

Добавление новых функций

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

  1. Мы широко используем их (например, основу или подчеркивание).
  2. Они компактны и сфокусированы без бесконечных вариантов конфигурации.

Еще в июле 2014 года мы заменили moment.js (60 КБ) нашими собственными функциями, которые расширили собственный прототип Date Javascript (1,6 КБ). Итак, в марте 2015 года, когда нам понадобилась всплывающая подсказка, мы посмотрели на сторонние библиотеки всплывающих подсказок и вскоре решили, что должны написать свою собственную.

Почти во всех сторонних библиотеках было много вещей, которые нам не нужны, и вам, вероятно, тоже не нужны…

Создание собственной всплывающей подсказки

Для начала нам нужен был пример того, как должен выглядеть и вести себя конечный результат. Всплывающая подсказка Google Doc была почти идеальной: простой, информативной и не слишком замысловатой.

В течение нескольких минут у нас была базовая демонстрация, работающая в JSfiddle, и в течение нескольких часов она была завершена и опубликована на github в виде пакета Bower.

Преимущества легкости

Без настройки всплывающей подсказке требуется установить только один атрибут данных, что сделает ваш HTML-код более чистым и управляемым. Кроме того, отсутствие зависимости от внешнего CSS означает, что ваш браузер делает меньше запросов, что ускоряет время загрузки страницы.** **

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

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

Вам не только не нужно прочесывать API, чтобы изучить параметры конфигурации, вам даже не нужно вызывать функцию для ее инициализации. Сценарий даже делает это за вас.

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

Вы можете найти конечный результат здесь, на github:

https://github.com/mailmangroup/kawo-tooltip/

Так как же всплывающая подсказка KAWO сравнивается с другими библиотеками?

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

Чистый JS: никаких зависимостей

Параметры нулевой конфигурации

Нет внешнего CSS*

Несколько всплывающих подсказок на 1 элементе

Простая документация

Контроль над позицией

Тематика

Самоинициализация

Размер (КБ)

iamceege/
всплывающая подсказка

17.5

Первоначально опубликовано на blog.kawo.com.