HoverCard

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

Приклад

Автор бібліотеки — Ігор.

API

Props

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

Події

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

Слоти

Назва	Опис
`trigger`	—
`default`	—

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

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

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

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

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

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

Доступність

Focus відкриває той самий вміст, що й hover. Невелика затримка закриття дозволяє перевести pointer або focus у телепортовану картку. Escape закриває її, усі таймери очищаються під час unmount.