Hover Card

1import { Avatar, HoverCard, HoverCardContent, HoverCardTrigger } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <HoverCard>
6      <HoverCardTrigger asChild>
7        <button className="inline-flex items-center gap-2 text-sm font-medium underline decoration-dotted underline-offset-4">
8          <Avatar fallback="GL" size="sm" />
9          @glinui
10        </button>
11      </HoverCardTrigger>
12      <HoverCardContent>
13        <div className="space-y-1">
14          <p className="text-sm font-semibold">@glinui</p>
15          <p className="text-xs text-neutral-600 dark:text-neutral-300">
16            Glass-first component system for modern interfaces.
17          </p>
18        </div>
19      </HoverCardContent>
20    </HoverCard>
21  )
22}

1import { Badge, HoverCard, HoverCardContent, HoverCardTrigger } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="flex flex-wrap items-center gap-4">
6      <HoverCard openDelay={0} closeDelay={150}>
7        <HoverCardTrigger asChild>
8          <button className="text-sm font-medium underline decoration-dotted underline-offset-4">
9            Instant preview
10          </button>
11        </HoverCardTrigger>
12        <HoverCardContent variant="glass" size="sm">
13          <div className="space-y-2">
14            <Badge variant="glass">glass</Badge>
15            <p className="text-xs text-neutral-600 dark:text-neutral-300">Open delay: 0ms</p>
16          </div>
17        </HoverCardContent>
18      </HoverCard>
19      <HoverCard openDelay={500} closeDelay={250}>
20        <HoverCardTrigger asChild>
21          <button className="text-sm font-medium underline decoration-dotted underline-offset-4">
22            Delayed preview
23          </button>
24        </HoverCardTrigger>
25        <HoverCardContent variant="outline" size="md">
26          <p className="text-xs text-neutral-600 dark:text-neutral-300">
27            Opens after 500ms with outline surface.
28          </p>
29        </HoverCardContent>
30      </HoverCard>
31    </div>
32  )
33}