# Hover card: Long content

> Unbroken text wraps inside the card, and a card taller than the space beside the trigger scrolls instead of leaving the screen.

Example: https://hextaui.com/docs/hover-card/examples/long-content
Component docs: https://hextaui.com/docs/hover-card.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/hover-card-long-content.json
```

This adds `components/examples/hover-card/long-content.tsx` with the Hover card component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/hover-card/long-content.tsx"
import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export function HoverCardLongContent() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="#"
        render={<Button variant="link" nativeButton={false} render={<a />} />}
      >
        Long preview
      </HoverCardTrigger>
      <HoverCardContent>
        <p className="font-medium">
          https://example.com/a/really/long/url/without/any/spaces/at/all
        </p>
        <p className="text-muted-foreground">
          Long previews wrap inside the card, and when the card is taller than
          the space around the trigger it scrolls instead of leaving the screen.
          Keep previews short, though: everything here should also be on the
          linked page.
        </p>
      </HoverCardContent>
    </HoverCard>
  )
}
```

## Props in this example

### HoverCardTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<a>` | Render your own link, such as <Button variant="link" /> or a router link. |

## More Hover card examples

- [Side](https://hextaui.com/docs/hover-card/examples/sides.md)
- [Delay](https://hextaui.com/docs/hover-card/examples/delay.md)
- [Inline link](https://hextaui.com/docs/hover-card/examples/inline.md)
- [Interactive content](https://hextaui.com/docs/hover-card/examples/rich-content.md)
- [Shared card](https://hextaui.com/docs/hover-card/examples/detached.md)
- [Arrow](https://hextaui.com/docs/hover-card/examples/arrow.md)
- [Loading content](https://hextaui.com/docs/hover-card/examples/async.md)
- [Controlled](https://hextaui.com/docs/hover-card/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/hover-card/examples/rtl.md)