HoverCardDemo() — ui Function Reference

Architecture documentation for the HoverCardDemo() function in hover-card-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ HoverCardDemo() — ui Function Reference

Dependency Diagram

graph TD
  c0205a80_2ca5_c505_9644_e983320d63a9["HoverCardDemo()"]
  8e00d7c0_ffc5_8889_904e_85f40f2a9855["hover-card-demo.tsx"]
  c0205a80_2ca5_c505_9644_e983320d63a9 -->|defined in| 8e00d7c0_ffc5_8889_904e_85f40f2a9855
  style c0205a80_2ca5_c505_9644_e983320d63a9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/hover-card-demo.tsx lines 9–28

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger
        delay={10}
        closeDelay={100}
        render={<Button variant="link" />}
      >
        Hover Here
      </HoverCardTrigger>
      <HoverCardContent className="flex w-64 flex-col gap-0.5">
        <div className="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div className="text-muted-foreground mt-1 text-xs">
          Joined December 2021
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}