Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# HoverCard

Content card that appears when hovering over an element

## Example​

    import { CalendarDays } from "lucide-react"

    import {
      Avatar,
      AvatarFallback,
      AvatarImage,
      Button,
      HoverCard,
      HoverCardContent,
      HoverCardTrigger,
    } from "@databricks/appkit-ui/react"

    export default function HoverCardExample() {
      return (
        <HoverCard>
          <HoverCardTrigger asChild>
            <Button variant="link">@nextjs</Button>
          </HoverCardTrigger>
          <HoverCardContent className="w-80">
            <div className="flex justify-between space-x-4">
              <Avatar>
                <AvatarImage src="https://github.com/vercel.png" />
                <AvatarFallback>VC</AvatarFallback>
              </Avatar>
              <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">
                  <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
                  <span className="text-xs text-muted-foreground">
                    Joined December 2021
                  </span>
                </div>
              </div>
            </div>
          </HoverCardContent>
        </HoverCard>
      )
    }

## HoverCard​

Content card that appears when hovering over an element

Source: `packages/appkit-ui/src/react/ui/hover-card.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`open` | `boolean` |  | - | -
`defaultOpen` | `boolean` |  | - | -
`onOpenChange` | `((open: boolean) => void)` |  | - | -
`openDelay` | `number` |  | - | -
`closeDelay` | `number` |  | - | -

### Usage​

    import { HoverCard } from '@databricks/appkit-ui';

    <HoverCard /* props */ />

## HoverCardContent​

Source: `packages/appkit-ui/src/react/ui/hover-card.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`forceMount` | `true` |  | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`onEscapeKeyDown` | `((event: KeyboardEvent) => void)` |  | - | Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` |  | - | Event handler called when the a `pointerdown` event happens outside of the `HoverCard`. Can be prevented.
`onFocusOutside` | `((event: FocusOutsideEvent) => void)` |  | - | Event handler called when the focus moves outside of the `HoverCard`. Can be prevented.
`onInteractOutside` | `((event: FocusOutsideEvent | PointerDownOutsideEvent) => void)` |  | - | Event handler called when an interaction happens outside the `HoverCard`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`asChild` | `boolean` |  | - | -
`align` | `enum` |  | - | -
`side` | `enum` |  | - | -
`sideOffset` | `number` |  | - | -
`alignOffset` | `number` |  | - | -
`arrowPadding` | `number` |  | - | -
`avoidCollisions` | `boolean` |  | - | -
`collisionBoundary` | `Boundary | Boundary[]` |  | - | -
`collisionPadding` | `number | Partial<Record<"left" | "right" | "top" | "bottom", number>>` |  | - | -
`sticky` | `enum` |  | - | -
`hideWhenDetached` | `boolean` |  | - | -
`updatePositionStrategy` | `enum` |  | - | -

### Usage​

    import { HoverCardContent } from '@databricks/appkit-ui';

    <HoverCardContent /* props */ />

## HoverCardTrigger​

Source: `packages/appkit-ui/src/react/ui/hover-card.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -

### Usage​

    import { HoverCardTrigger } from '@databricks/appkit-ui';

    <HoverCardTrigger /* props */ />