Мне нужно создать простую библиотеку всплывающих подсказок, которая работает следующим образом:
каждый элемент DOM с определенной комбинацией атрибутов (например, class = "tooltip", data-tooltip-text = "some text") автоматически отображает всплывающую подсказку (содержащую текст из данных attr) при наведении курсора.
Это поведение должно сохраняться за счет внешних манипуляций с DOM. Мне действительно нравится идея использовать HTMLcollection для этого, для его "живой" природы, поскольку итерирование всего DOM с каждым изменением DOM звучит потенциально очень требовательно.
Теперь я хотел бы посмотреть / прослушать коллекцию и запускать последовательность каждый раз, когда она меняется (перебирайте узлы, посмотрите, есть ли у них слушатель, добавьте его, если их нет).
Как мне это сделать? Методы watch и наблюдения кажутся (если я правильно понимаю) способными к этому, но теперь они устарели. MDN говорит, что Proxy покрывает большинство случаев использования, но покрывает ли он мой (я не нашел способа заставить его работать)? Или есть какой-то другой способ, по которому я скучаю?
А что насчет MutationObserver ? Я предполагаю, что глубокое наблюдение за всем приложением и многократная выборка нового NodeList через querySelectorAll при каждом отдельном изменении будет слишком требовательным (библиотека должна работать поверх приложения React). Динамическая фиксация HTMLCollection (как значения) в DOM через React, а затем (поверхностное) прослушивание изменений с помощью MutationObserver может сработать, но я сомневаюсь, что это также будет хорошей идеей.