UILab

Hover Card

Displays a badge or a component that looks like a badge.

"use client"

import {
  Button,
  HoverCard,

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "uilab-core"
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Trigger delays

Use delay and closeDelay on the trigger to control when the card opens and closes.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Positioning

Use the side and align props on HoverCardContent to control placement.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

Examples

Basic

"use client"

import {
  Button,
  HoverCard,

Sides

"use client"

import {
  Button,
  HoverCard,

On this page