Как реализовать Tooltip?

Junior
199 просмотров
AFK Offer AI

Показать при hover/focus, скрыть при leave/blur. Позиционирование: абсолютное относительно триггера или через Floating UI (Popper.js). Нужно обрабатывать edge cases: tooltip не должен выходить за viewport (flip/shift). aria-describedby связывает триггер и tooltip. role="tooltip" на элементе. Delay на показ (300ms) и скрытие (100ms) чтобы не мерцал. Touch devices: показывать по long press или tap. Portal рендеринг для z-index проблем. Стрелочка: CSS triangle или SVG с позиционированием.

Следующий вопрос

Как тестировать accessibility?