LinkPreview

Hover preview card for links. Shows content when the user hovers over a trigger link.

Example

Props

LinkPreview.Root

Prop	Type	Default	Description
`openDelay`	`number`	`500`	Delay in ms before preview opens
`closeDelay`	`number`	`300`	Delay in ms before preview closes
`children`	`Snippet`	—	Trigger and content

LinkPreview.Trigger

Prop	Type	Default	Description
`href`	`string`	—	Link URL
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Link text

LinkPreview.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side of the trigger
`sideOffset`	`number`	`4`	Distance from trigger in px
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Preview content

Usage

<script>
  import { LinkPreview } from '@chrissnell/chonky-ui';
</script>

<LinkPreview.Root>
  <LinkPreview.Trigger href="https://example.com">
    Hover to preview
  </LinkPreview.Trigger>
  <LinkPreview.Content>
    <div style="padding: 0.75rem;">
      <strong>Example Site</strong>
      <p>A description of the linked content.</p>
    </div>
  </LinkPreview.Content>
</LinkPreview.Root>