# HoverCard

Content card that appears when hovering over an element

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#hovercard-1 "Direct link to HoverCard")

Content card that appears when hovering over an element

**Source:** [`packages/appkit-ui/src/react/ui/hover-card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/hover-card.tsx)

### Props[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<HoverCard /* props */ />

```

## HoverCardContent[​](#hovercardcontent "Direct link to HoverCardContent")

**Source:** [`packages/appkit-ui/src/react/ui/hover-card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/hover-card.tsx)

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<HoverCardContent /* props */ />

```

## HoverCardTrigger[​](#hovercardtrigger "Direct link to HoverCardTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/hover-card.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/hover-card.tsx)

### Props[​](#props-2 "Direct link to Props")

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

### Usage[​](#usage-2 "Direct link to Usage")

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

<HoverCardTrigger /* props */ />

```