TooltipLayer

Пример

import { TooltipLayer } from "@toimetdev/pathlogs-core";

// один раз в корне приложения
<TooltipLayer />

// где угодно дальше
<button data-tip="Архивировать проект">…</button>
<span data-tip="Задача заблокирована UI-12">🔒</span>

Подсказка показывается над элементом, а если сверху мало места — под ним, и всегда удерживается в пределах окна по горизонтали.

Почему слой, а не обёртка

Побочные выгоды такого решения:

• подсказку можно повесить на серверный компонент — атрибут не требует JS;
• в DOM живёт один бабл, а не сотня скрытых;
• ничего не нужно импортировать в месте использования.

Плата — координаты fixed устаревают при прокрутке, поэтому при скролле подсказка просто прячется.

Доступность

Нативный title читают скринридеры, а свой атрибут — нет. Поэтому слой сам проставляет aria-label элементам, у которых нет видимого текста и своего aria-label:

<!-- было -->
<button data-tip="Настроить колонку"><svg …/></button>

<!-- стало -->
<button data-tip="Настроить колонку" aria-label="Настроить колонку"><svg …/></button>

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

Пропсы