New

HoverCard

For when you need to show more information on hover.

overlay

popup

hover

tooltip

Preview

Code

TSX

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

    export function HoverCardDemo() {
      return (
        <HoverCard>
          <HoverCardTrigger>Hover</HoverCardTrigger>
          <HoverCardContent>
            <div className="flex justify-between space-x-4">
              <div className="space-y-1">
                <h4 className="text-sm font-semibold">@nextjs</h4>
                <p className="text-sm">
                  The React Framework – created and maintained by @vercel.
                </p>
                <div className="flex items-center pt-2">
                  <span className="text-xs text-muted-foreground">
                    Joined December 2021
                  </span>
                </div>
              </div>
            </div>
          </HoverCardContent>
        </HoverCard>
      )
    }

API Reference

Prop	Type	Default	Description
defaultOpen	boolean	-	The open state of the hover card when it is initially rendered.
open	boolean	-	The controlled open state of the hover card.
onOpenChange	function	-	Callback function called when the open state changes.
openDelay	number	700	The duration from when the mouse enters the trigger until the hover card opens.
closeDelay	number	300	The duration from when the mouse leaves the trigger or content until the hover card closes.

View Full Documentation