Link Preview

Open Melt UI Details

Features

• Controlled or uncontrolled
• Ignored by screen readers
• Custom open and close delay support
• Positioning and alignment customization

Anatomy

• Trigger: The element that opens the link preview on hover.
• Content: The element containing the content for the link preview.
• Arrow: An optional arrow component

Usage

Create a link preview using the createLinkPreview builder function.

    <script lang="ts">
  import { createLinkPreview, melt } from '@melt-ui/svelte'
  const {
    elements: { trigger, content, arrow }
  } = createLinkPreview()
</script>
	

    <script lang="ts">
  import { createLinkPreview, melt } from '@melt-ui/svelte'
  const {
    elements: { trigger, content, arrow }
  } = createLinkPreview()
</script>
	

Then you can use the trigger, content, and arrow to construct a link preview. A high level example of how to structure the link preview is shown below.

    <script lang="ts">
  import { createLinkPreview, melt } from '@melt-ui/svelte'
  const {
    elements: { trigger, content, arrow }
  } = createLinkPreview()
</script>
 
<button use:melt={$trigger}>Hover Me</button>
 
<div use:melt={$content}>
  <div>I am content inside the link preview</div>
  <div use:melt={$arrow} />
</div>
	

    <script lang="ts">
  import { createLinkPreview, melt } from '@melt-ui/svelte'
  const {
    elements: { trigger, content, arrow }
  } = createLinkPreview()
</script>
 
<button {...$trigger} use:trigger>Hover Me</button>
 
<div {...$content} use:content>
  <div>I am content inside the link preview</div>
  <div {...$arrow} use:arrow />
</div>
	

It's also possible to use Svelte Transitions, as demonstrated in the example at the top of this page.

Focus handling

By default the link preview will be shown when focused by the keyboard (or more specifically if :focus-visible would apply), and hide on blur.

You can disable this functionality by listening to and cancelling the custom m-focus and m-blur events.

    <button
  use:melt={$trigger}
  on:m-focus={(e) => {
    e.preventDefault()
  }}
  on:m-blur={(e) => {
    e.preventDefault()
  }}>
  Hover Me
</button>
	

    <button
  {...$trigger} use:trigger
  on:m-focus={(e) => {
    e.preventDefault()
  }}
  on:m-blur={(e) => {
    e.preventDefault()
  }}>
  Hover Me
</button>
	

API Reference

Accessibility

The link preview is only intended to be used with a mouse or other pointing device. The preview's content element cannot be accessed via the keyboard and is not exposed to screen readers. As a result the preview should not contain content that is otherwise not visible elsewhere.

Comparison with Tooltip

The link preview is similar to the Tooltip builder, as both have floating contents that initially are hidden, and appear when hovering over the trigger, or focusing it with the keyboard.

There are some key differences though. A Tooltip's content should not have any clickable elements inside it, while a Link Preview's content can contain them. Also, a Tooltip's content is exposed to screen readers, while a Link Preview's content is not. Keep this in mind when choosing which builder to use, as this has implications for accessibility.