Hover Card | Park UI

Installation

npx @park-ui/cli@next add hover-card

Add Component

Copy the code snippet below into you components folder.

'use client'
import { HoverCard } from '@ark-ui/react/hover-card'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { hoverCard } from 'styled-system/recipes'

const { withRootProvider, withContext } = createStyleContext(hoverCard)

export type RootProps = ComponentProps<typeof Root>
export const Root = withRootProvider(HoverCard.Root)
export const RootProvider = withRootProvider(HoverCard.RootProvider)
export const Arrow = withContext(HoverCard.Arrow, 'arrow')
export const ArrowTip = withContext(HoverCard.ArrowTip, 'arrowTip')
export const Content = withContext(HoverCard.Content, 'content')
export const Positioner = withContext(HoverCard.Positioner, 'positioner')
export const Trigger = withContext(HoverCard.Trigger, 'trigger')

export { HoverCardContext as Context } from '@ark-ui/react/hover-card'

Integrate Recipe

Integrate this recipe in to your Panda config.

import { hoverCardAnatomy } from '@ark-ui/react/hover-card'
import { defineSlotRecipe } from '@pandacss/dev'

export const hoverCard = defineSlotRecipe({
  className: 'hover-card',
  slots: hoverCardAnatomy.keys(),
  base: {
    content: {
      '--hovercard-bg': 'colors.bg.default',

      bg: 'var(--hovercard-bg)',
      borderRadius: 'l3',
      boxShadow: 'lg',
      display: 'flex',
      flexDirection: 'column',
      maxWidth: '80',
      outline: '0',
      padding: '4',
      position: 'relative',
      textStyle: 'sm',
      transformOrigin: 'var(--transform-origin)',
      zIndex: 'popover',
      _open: {
        animationStyle: 'slide-fade-in',
        animationDuration: 'fast',
      },
      _closed: {
        animationStyle: 'slide-fade-out',
        animationDuration: 'faster',
      },
    },
    arrow: {
      '--arrow-size': 'sizes.3',
      '--arrow-background': 'var(--hovercard-bg)',
    },
    arrowTip: {
      borderTopWidth: '0.5px',
      borderInlineStartWidth: '0.5px',
    },
  },
})

Usage

import { HoverCard } from '@/components/ui'

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Positioner>
    <HoverCard.Content>
      <HoverCard.Arrow>
        <HoverCard.ArrowTip />
      </HoverCard.Arrow>
    </HoverCard.Content>
  </HoverCard.Positioner>
</HoverCard.Root>

Shortcuts

The HoverCard provides a shortcuts for common use cases.

Arrow

The HoverCard.Arrow renders the HoverCard.ArrowTip component within in by default.

This works:

<HoverCard.Arrow>
  <HoverCard.ArrowTip />
</HoverCard.Arrow>

This might be more concise, if you don't need to customize the arrow tip.

<HoverCard.Arrow />

Examples

Controlled

Use the open and onOpenChange to control the visibility of the hover card.

@grizzly_codes

Delays

Control the open and close delays using the openDelay and closeDelay props.

@grizzly_codes

Placement

Use the positioning.placement prop to change the position of the hover card.

@grizzly_codes

Disabled

Use the disabled prop to prevent opening the hover card on interaction.

@grizzly_codes

Dialog

To use the HoverCard within a Dialog, you need to avoid portalling the HoverCard.Positioner to the document's body.

Accessibility

HoverCard should be used solely for supplementary information that is not essential for understanding the context. It is inaccessible to screen readers and cannot be activated via keyboard, so avoid placing crucial content within it.

Props

Root

Prop	Default	Type
`closeDelay`	`300`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openDelay`	`700`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`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.
`disabled`		`boolean` Whether the hover card is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; positioner: string; arrow: string }>` The ids of the elements in the popover. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`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
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)