Skip to main contentSkip to sidebarSkip to headerSkip to footer

Hover Card

A pop-up card that appears when a user hovers over an element.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
import { HoverCard, HoverCardContent, HoverCardTrigger } from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

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

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗