CoreHoverCard
Примеры использования и документация.
Расширенная подсказка по наведению: рядом с триггером раскрывается настоящая карточка — с вёрсткой, ссылками и действиями. Профиль по наведению на аватар, превью документа по имени автора, детали строки списка: пользователь видит всё сразу и переходит по ссылкам, не открывая лишних страниц. Тултипа мало, модалки слишком — это оно.
Панель интерактивна — её нельзя прятать pointer-events: none как тултип: по ней кликают и водят курсор. Открытость удерживают четыре независимых источника (курсор и фокус на триггере и на панели) — курсор успевает дойти до панели в grace-окно closeDelay, а клавиатурный путь к ссылкам карточки не обрывается после ухода фокуса с триггера. openDelay защищает от случайного провода курсора; Esc закрывает панель, не всплывая выше — чужие слои не задеты.
aria-состояние живёт на вашем элементе: aria-haspopup="dialog" и aria-expanded клонируются на реальную кнопку/ссылку триггера (на roleless-обёртке их ARIA запрещает). Панель — role="dialog" с именем из label. Как и тултип, вне стека оверлеев: не модальна, не пишет историю; корень — инлайн span, валидный внутри <p>. flowBorder — фирменный перелив рамки (--hover-card-flow-a/-b, полная замена — --hover-card-flow-image); при prefers-reduced-motion движение градиента отключается, появление сохраняется.