Hover Card

1import { HoverCard, HoverCardContent, HoverCardTrigger } from "passport-ui";
2import { Button } from "passport-ui";

1<HoverCard>
2  <HoverCardTrigger asChild>
3    <Button variant="link">Passport UI</Button>
4  </HoverCardTrigger>
5  <HoverCardContent className="w-sm">
6    <div className="meta-container">
7      <h3>Maintainer</h3>
8      <p>John Doe</p>
9    </div>
10  </HoverCardContent>
11</HoverCard>
12 
13{/* With custom timing */}
14<HoverCard openDelay={300} closeDelay={100}>
15  <HoverCardTrigger asChild>
16    <Button variant="link">Quick Preview</Button>
17  </HoverCardTrigger>
18  <HoverCardContent>
19    <p>This hover card opens quickly!</p>
20  </HoverCardContent>
21</HoverCard>