Hover Card

Displays additional information or options when the cursor hovers over a particular element.

View code

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 hovercard on hover.
Content: The element containing the content for the hovercard.
Arrow: An optional arrow component

Usage

Create a hovercard using the createHoverCard builder function.

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

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

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

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

API Reference

createHoverCard

Props

Prop	Default	Type / Description
`defaultOpen`	`false`	`boolean` Whether the hover card is open by default.
`positioning`	`placement: 'bottom'`	`FloatingConfig` A configuration object which determines how the floating element is positioned relative to the trigger.
`arrowSize`	`8`	`number` The size of the arrow which points to the trigger in pixels.
`closeOnOutsideClick`	`true`	`boolean` Whether or not to close the hover card when the user clicks outside of it.
`openDelay`	`700`	`number` The delay in milliseconds before the hover card opens.
`closeDelay`	`300`	`number` The delay in milliseconds before the hover card closes.

Returned Props

Returned Prop	Type	Description
`open`	`Writable<boolean>`	A writable store that controls the open state of the hover card.
`options`	`Writable<CreateHoverCardProps>`	A writable store that controls the options of the hover card.
`trigger`	-	The builder store used to create the hover card trigger.
`content`	-	The builder store used to create the hover card content.
`arrow`	-	The builder store used to create the hover card arrow.

trigger

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-melt-hover-card-trigger]`	Present on all trigger elements.

content

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-melt-hover-card-content]`	Present on all content elements.

arrow

Data Attributes

Data Attribute	Value
`[data-arrow]`	`'true'`
`[data-melt-hover-card-arrow]`	Present on all arrow elements.

Accessibility

The hover card is only intended to be used with a mouse or other pointing device and doesn't respond to keyboard events.

On This Page