HoverCardRtl() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ HoverCardRtl() — ui Function Reference

Dependency Diagram

graph TD
  f9b75316_b765_059d_7830_2397b85c5e0f["HoverCardRtl()"]
  06faa55d_daae_78d7_7593_6cf42bb2a774["hover-card-rtl.tsx"]
  f9b75316_b765_059d_7830_2397b85c5e0f -->|defined in| 06faa55d_daae_78d7_7593_6cf42bb2a774
  style f9b75316_b765_059d_7830_2397b85c5e0f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/hover-card-rtl.tsx lines 61–83

export function HoverCardRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div className="flex flex-wrap justify-center gap-2">
      {physicalSides.map((side) => (
        <HoverCard key={side} openDelay={10} closeDelay={100}>
          <HoverCardTrigger asChild>
            <Button variant="outline">{t[side]}</Button>
          </HoverCardTrigger>
          <HoverCardContent
            side={side}
            className="flex w-64 flex-col gap-1"
            dir={dir}
          >
            <div className="font-semibold">{t.name}</div>
            <div className="text-muted-foreground text-sm">{t.price}</div>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}