Hover Card

For sighted users to preview content available behind a link.

import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export default function Component() {
  return (
    <HoverCard positioning={{ placement: "top" }} openDelay={0} closeDelay={0}>
      <HoverCardTrigger asChild>
        <Button
          className="size-auto overflow-hidden rounded-full bg-transparent p-0 hover:bg-transparent"
          aria-label="My profile"
          asChild
        >
          <a href="https://github.com/shipbase/ui">
            <img
              src="https://ui.shipbase.xyz/apple-touch-icon.png"
              width={40}
              height={40}
              alt="Avatar"
            />
          </a>
        </Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-[340px]">
        <div className="flex items-start gap-3">
          <img
            className="shrink-0 rounded-full"
            src="https://ui.shipbase.xyz/apple-touch-icon.png"
            width={40}
            height={40}
            alt="Avatar"
          />
          <div className="space-y-1">
            <p className="font-medium text-sm">shipbase/ui</p>
            <p className="text-muted-foreground text-sm">
              Beautiful UI components built with Tailwind CSS and Ark UI.
            </p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { HoverCard as HoverCardPrimitive } from "@ark-ui/react/hover-card"

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

const HoverCard = HoverCardPrimitive.Root

const HoverCardArrow = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Arrow>,
  HoverCardPrimitive.ArrowProps
>(({ className, ...props }, ref) => (
  <HoverCardPrimitive.Arrow
    ref={ref}
    className={cn(
      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
      className
    )}
    {...props}
  >
    <HoverCardPrimitive.ArrowTip className="border-t border-l" />
  </HoverCardPrimitive.Arrow>
))
HoverCardArrow.displayName = "HoverCardArrow"

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  HoverCardPrimitive.ContentProps
>(({ className, ...props }, ref) => (
  <HoverCardPrimitive.Positioner>
    <HoverCardPrimitive.Content
      ref={ref}
      className={cn(
        "group data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
        className
      )}
      {...props}
    />
  </HoverCardPrimitive.Positioner>
))
HoverCardContent.displayName = "HoverCardContent"

const HoverCardContext = HoverCardPrimitive.Context

const HoverCardRootProvider = HoverCardPrimitive.RootProvider

const HoverCardTrigger = HoverCardPrimitive.Trigger

export {
  HoverCard,
  HoverCardArrow,
  HoverCardContent,
  HoverCardContext,
  HoverCardRootProvider,
  HoverCardTrigger,
}

export {
  useHoverCard,
  useHoverCardContext,
  type HoverCardOpenChangeDetails,
} from "@ark-ui/react/hover-card"

Update the import paths to match your project setup.

Usage

import {
  HoverCard,
  HoverCardArrow,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    <HoverCardArrow />
    Content
  </HoverCardContent>
</HoverCard>

Installation

Usage