Hover Card

A component that displays additional information when hovering over an element

Anatomy

Usage

<script>
  import {HoverCard, Portal} from 'ui-ingredients';
</script>

<HoverCard.Root>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <Portal>
    <HoverCard.Positioner>
      <HoverCard.Content>
        <HoverCard.Arrow>
          <HoverCard.ArrowTip />
        </HoverCard.Arrow>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed omnis natus
        neque, tenetur praesentium laboriosam esse eius at maxime quam magni
        rerum animi ducimus debitis?
      </HoverCard.Content>
    </HoverCard.Positioner>
  </Portal>
</HoverCard.Root>

API Reference

Root

Prop	Default	Description
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`		`boolean` The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card.
`id`		`string` The unique identifier of the machine.
`ids`		`{ trigger?: string; content?: string; positioner?: string; arrow?: string; }` The ids of the elements in the popover. Useful for composition.
`keepMounted`		`boolean` Whether to keep the component mounted after exit.
`lazyMount`		`boolean` Whether to enable lazy mounting.
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the hover card opens or closes.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`open`		`boolean` The controlled open state of the hover card
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`positioning`		`PositioningOptions` The user provided options used to position the popover content

Arrow

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

ArrowTip

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	content
`data-placement`	The placement of the content
`data-scope`	hover-card
`data-state`	"open" \| "closed"

Positioner

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	trigger
`data-placement`	The placement of the trigger
`data-scope`	hover-card
`data-state`	"open" \| "closed"