HoverCard

Немодальний preview із delay, hover-focus parity та SSR-безпечним Teleport.

API

Props

Назва	Тип	Типово	Опис
`ariaLabel`	`string`	`"Додаткова інформація"`	Доступна назва картки.
`placement`	rightlefttopbottombottom-startbottom-endtop-starttop-end	`"bottom-start"`	Бажана позиція картки. Не вміщається — перевертається.
`openDelay`	`number`	`400`	Затримка перед показом, мс. Без неї картка блимає при кожному проході курсора повз посилання.
`closeDelay`	`number`	`250`	Затримка перед приховуванням, мс. Дає час довести курсор від тригера до самої картки.
`width`	`string`	`"20rem"`	Ширина картки, будь-яка CSS-величина.
`modelValue`	`boolean`	`false`	Відкрито. Використовуйте через `v-model`.
`disabled`	`boolean`	`false`	—

Події

Назва	Payload	Опис
`update:modelValue`	`[value: boolean]`	Картку показано або приховано.
`close`	`[]`	Картка закрилася.
`open`	`[]`	Картка відкрилася після delay.

Слоти

Назва	Опис
`trigger`	Тригер (зазвичай посилання). `triggerAttrs` — через `v-bind`: у них наведення, фокус і Tab, що веде у відкриту картку.
`default`	Вміст картки. `close` ховає її.

Доступно через ref

Назва	Тип	Опис
`open`	`() => Promise<void>`	—
`close`	`() => void`	—

Коли використовувати

Для необовʼязкового preview профілю, посилання, терміна чи сутності без переходу на окрему сторінку. Вміст має доповнювати, а не бути необхідним для розуміння trigger.

Коли НЕ використовувати

Не використовуйте для кнопок дій, обовʼязкової підказки або мобільного-only сценарію. Для короткої назви є UiTooltip, для інтерактивних налаштувань — UiPopover.

На дотику картка не відкривається взагалі. Наведення там немає, а сумісні mouseenter і фокус, які браузер шле після тапу по посиланню, відкривали картку поверх переходу — вона блимала перед новою сторінкою. Тригер лишається звичайним посиланням.

Доступність

Focus відкриває той самий вміст, що й hover. Невелика затримка закриття дозволяє перевести курсор у телепортовану картку.

Картка стоїть у кінці body, тож Tab із тригера, поки вона відкрита, веде в неї — на перше посилання чи кнопку. Tab з останнього веде до елемента за тригером на сторінці, Shift+Tab із першого — назад на тригер. Сам фокус у картку не стрибає, інакше прохід Tab'ом по списку посилань застрягав би в кожній.

Escape і клік поза карткою закривають її. Курсор, що пройшов тригером швидше за openDelay, картку не відкриває: раніше вона з'являлася вже після того, як курсор пішов, і лишалася висіти.