ui/hover-card.tsx

A customizable hover card component built on Radix UI for displaying additional information when a user hovers over a trigger element.

// Source: https://github.com/ucbepic/docetl | License: MIT | Copyright 2024 Shreya Shankar
// Provided via justclaw.it.com; keep this notice with the code.
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-

... (truncated -- full source via MCP)