Overlays Hover Card

Hover Card

A preview on hover or focus — who, what, where — without leaving the page.

Preview

Usage

tsx

import { HoverCard, HoverCardTrigger, HoverCardContent, ZostelSymbol } from "zostel-ui";

<HoverCard>
  <HoverCardTrigger asChild><a href="https://www.zostel.com">@zostel</a></HoverCardTrigger>
  <HoverCardContent className="w-80">
    <ZostelSymbol size={24} />
    <p>111 Zostels · 80+ destinations · 5M+ travellers · since 2013.</p>
  </HoverCardContent>
</HoverCard>

HoverCard

Prop	Type	Default	Description
`openDelay`	`number`	`700`	ms before it opens.
`closeDelay`	`number`	`300`	ms before it closes.

openDelay

Type: number

Default: 700

ms before it opens.

closeDelay

Type: number

Default: 300

ms before it closes.

Note

Touch screens have no hover: keep anything essential in the page too.