Koori UI
Components

GlassHoverCard

Reveal rich preview content when users hover over a trigger.

Preview

Usage

import { GlassHoverCard, GlassHoverCardTrigger, GlassHoverCardContent, GlassButton } from "koori-ui";
 
<GlassHoverCard>
  <GlassHoverCardTrigger asChild>
    <GlassButton>Hover me</GlassButton>
  </GlassHoverCardTrigger>
  <GlassHoverCardContent>
    Rich preview content goes here.
  </GlassHoverCardContent>
</GlassHoverCard>

Props

GlassHoverCard

PropTypeDefaultDescription
openboolean—Controlled open state
defaultOpenbooleanfalseDefault open state
onOpenChange(open: boolean) => void—Fired when open state changes
openDelaynumber700Delay in ms before opening
closeDelaynumber300Delay in ms before closing

GlassHoverCardContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""bottom"Side to render on
align"start" | "center" | "end""center"Alignment against the trigger
sideOffsetnumber4Distance from the trigger

All Radix HoverCard props are also supported.

Previous

GlassEmpty

Next

GlassInputOTP

On this page