104Get started
HextaUI

Hover card: Delay

delay and closeDelay on the trigger set how long the pointer must rest before the card opens and how long it lingers after leaving. The 600ms default stops cards from flashing open as the pointer crosses a page.

Default (600ms)Fast (150ms)
import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export function HoverCardDelay() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <HoverCard>
        <HoverCardTrigger
          href="#"
          render={
            <Button variant="outline" nativeButton={false} render={<a />} />
          }
        >
          Default (600ms)
        </HoverCardTrigger>
        <HoverCardContent className="w-56">
          Waits long enough that passing the pointer over the link doesn’t open
          it.
        </HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger
          href="#"
          delay={150}
          closeDelay={100}
          render={
            <Button variant="outline" nativeButton={false} render={<a />} />
          }
        >
          Fast (150ms)
        </HoverCardTrigger>
        <HoverCardContent className="w-56">
          Opens almost right away and closes quickly.
        </HoverCardContent>
      </HoverCard>
    </div>
  )
}

Add this example

This adds the example as components/examples/hover-card/delay.tsx, together with the Hover card component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/hover-card-delay.json

To add only the component, follow the Hover card installation.

Props in this example

The Hover card props this example sets, from the API reference.

HoverCardTrigger

PropTypeDefault
href
string–
delayMilliseconds before hover or focus opens the card.
number600
closeDelayMilliseconds the card stays open after leaving.
number300
renderRender your own link, such as <Button variant="link" /> or a router link.
ReactElement | (props, state) => ReactElement<a>

Every prop is in the Hover card API reference.

More Hover card examples

See them all, with keyboard support and accessibility notes, on the Hover card page.

Related components