HoverCardSides() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ HoverCardSides() — ui Function Reference

Dependency Diagram

graph TD
  13566356_8983_937f_718c_d5ab125fbb6d["HoverCardSides()"]
  8f54c68c_358a_a7fd_84c6_51c473d7babc["hover-card-sides.tsx"]
  13566356_8983_937f_718c_d5ab125fbb6d -->|defined in| 8f54c68c_358a_a7fd_84c6_51c473d7babc
  style 13566356_8983_937f_718c_d5ab125fbb6d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/hover-card-sides.tsx lines 10–30

export function HoverCardSides() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {HOVER_CARD_SIDES.map((side) => (
        <HoverCard key={side} openDelay={100} closeDelay={100}>
          <HoverCardTrigger asChild>
            <Button variant="outline" className="capitalize">
              {side}
            </Button>
          </HoverCardTrigger>
          <HoverCardContent side={side}>
            <div className="flex flex-col gap-1">
              <h4 className="font-medium">Hover Card</h4>
              <p>This hover card appears on the {side} side of the trigger.</p>
            </div>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}