Hover Card

1import { Avatar, HoverCard, HoverCardContent, HoverCardTrigger } from "@glinui/ui"
2
3export function HoverCardBasicDemo() {
4return (
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 HoverCardDelayDemo() {
4return (
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}