LINUX.ORG.RU

Компонент для тултипов, совместимый с React, Preact, Inferno

 , , ,


0

3

Йо! Всем привет :3

Решил немного попиарить свою поделку на ЛОРе (должен же быть хоть какой-то толк от аккаунта ;)

Печально-известные аналоги вроде https://github.com/wwayne/react-tooltip (>1k LoC) создают инстансы для каждого (!) тултипа и для изменения текста подсказки пересоздают их все (!) заново, что приводит к диким лагам при большом количестве элементов с тултипами.

Было принято волевое решение написать все самому, как надо. В итоге получился компонент размером ~140 LoC, который создает только один инстанс и может легко обновлять свое содержимое. Работает все быстро, ничего лишнего. Лицензия MIT, может кому пригодится.

Репозиторий: https://github.com/slmgc/react-hint

Демо: https://react-hint.js.org/


За труды, конечно, лайк. Но зачем хвалиться малым LoC, если пишешь такое? Да и зачем вообще так писать и считать количество строк, если потом все равно будет минификация (вы ведь не пускаете в прод. неминифицированный код, верно?)

ktan ★★★
()
Ответ на: комментарий от ktan

ничего что ты смотришь в «транспиленный» код?

dib2 ★★★★★
()
Ответ на: комментарий от ktan

Но зачем хвалиться малым LoC
Да и зачем вообще так писать и считать количество строк, если потом все равно будет минификация

Чтобы было понимание, т.к. разница между 1k LoC и 0.1k LoC значительна. Плюс, от скромности не умру :3

если пишешь такое?

Отнюдь, я пишу такое: https://github.com/slmgc/react-hint/blob/master/src/index.js

То, что вы привели - это код, сгенерированный транслятором из ES6 в ES5.

slmgc
() автор топика
Ответ на: комментарий от slmgc

Пардон, не вчитывался и вообще не туда посмотрел)

ktan ★★★
()

Обновление

Выкатил обновление с поддержкой кастомных стилей и HTML-контента в тултипах: https://github.com/slmgc/react-hint

slmgc
() автор топика
21 августа 2017 г.

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

slmgc
() автор топика
Ответ на: комментарий от bvn13

Да, спасибо! Не было времени обновить демо-страницу, пофиксил, зафиксировав используюмую на страницу версию библиотеки.

slmgc
() автор топика
Ответ на: комментарий от zolden

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

slmgc
() автор топика

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

bvn13 ★★★★★
()
Ответ на: комментарий от bvn13

Это старый пример. В новом API есть настройка, чтобы убрать отображение хинта, если на него навести мышь. Все зависит от ситуации, т.к. иногда требуется не скрывать подсказку, если на нее навели курсор (по-умолчанию отключено, кстати).

slmgc
() автор топика
4 ноября 2017 г.
Ответ на: комментарий от bvn13

Обновил либу, обновил страницу с примерами.

хинт перекрывает следующую кнопку, над которой хинт уже не выводится

Теперь по-умолчанию выводится.

slmgc
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.