Overlays@knitui/components

HoverCard

HoverCard is a compound overlay that opens a floating dropdown when the pointer enters HoverCard.Target. Compose HoverCard → HoverCard.Target + HoverCard.Dropdown. The dropdown is hover-driven (not value-controlled); use initiallyOpened to start open, and openDelay/closeDelay to tune the timing.

WebiOSAndroid4 style slots22 own props12 examples

Stories Source Tests Open in Storybook

import { HoverCard } from "@knitui/components";

Playground

Loading playground…

positionDropdown placement relative to the target.

openDelayDelay in ms before the dropdown opens on hover.

closeDelayDelay in ms before the dropdown closes on leave.

offsetMain-axis gap in px between the target and the dropdown.

widthDropdown width; 'target' matches the trigger width.

shadowDropdown shadow scale.

radiusDropdown border radius token.

withinPortal

true

keepMounted

false

disabled

false

withArrow

false

withOverlay

false

initiallyOpened

false

Playground

<HoverCard
  position="bottom"
  openDelay={0}
  closeDelay={150}
  offset={8}
  width="max-content"
  withinPortal
  keepMounted={false}
  shadow="md"
  disabled={false}
  withArrow={false}
  withOverlay={false}
/>

Examples

Transitions

Configurable enter/exit animation via transitionProps (forwarded to the underlying Popover). Pick a preset, then hover the target to watch it animate in and out.

Loading example…

TransitionsSource Storybook

Compound API

Demonstrates the compound API: Target wraps the trigger, Dropdown holds the content.

Loading example…

Compound APISource Storybook

Initially Opened

Opens immediately on hover; start open via initiallyOpened for visual snapshot.

Loading example…

Initially OpenedSource Storybook

Disabled

Disabled — the dropdown never opens regardless of hover.

Loading example…

DisabledSource Storybook

With Arrow

Arrow points from the dropdown back toward the target.

Loading example…

With ArrowSource Storybook

With Delays

Open and close delays make the interaction feel less jittery.

Loading example…

With DelaysSource Storybook

Keep Mounted

keepMounted keeps the dropdown in the DOM (hidden) while closed.

Loading example…

Keep MountedSource Storybook

Positions

All supported placements shown together to compare positioning.

Loading example…

PositionsSource Storybook

Shadows

All five shadow levels side by side to compare dropdown elevation. Each card is always open (initiallyOpened) and rendered in its own contained relative wrapper (withinPortal={false}) so the dropdowns sit inline and don't overlap.

Loading example…

ShadowsSource Storybook

Styles

Per-slot styles targets individual parts — here the dropdown and arrow.

Loading example…

StylesSource Storybook

Callbacks

Open/close callbacks let consumers react to hover-driven visibility changes.

Loading example…

CallbacksSource Storybook

Props

Prop	Type	Default	Description
`animation`	`MotionPresetName \| undefined`	—	Motion preset for the dropdown — the unified `animation` vocabulary shared with Modal/Dialog/Drawer. Forwarded to the underlying `Popover`; sugar over `transitionProps.transition`, which wins if both are set.
`arrowOffset`	`number \| undefined`	`5`	Arrow distance from the start/end edge when `arrowPosition="side"`.
`arrowPosition`	`ArrowPosition \| undefined`	`'side'`	Arrow alignment: centered, or pinned toward an aligned placement.
`arrowRadius`	`number \| undefined`	`0`	Corner radius of the arrow's outward corner in px.
`arrowSize`	`number \| undefined`	`7`	Arrow square edge length in px.
`children`	`ReactNode`	—	Target + dropdown.
`closeDelay`	`number \| undefined`	`150`	Delay in ms before the dropdown closes on leave.
`disabled` system	`boolean \| undefined`	`false`	Disable the hover card (never opens).
`initiallyOpened`	`boolean \| undefined`	`false`	Initial opened state (HoverCard is hover-driven, not value-controlled).
`keepMounted`	`boolean \| undefined`	`false`	Keep the dropdown mounted while closed (adds `display: none`).
`offset`	`FloatingOffset \| undefined`	`8`	Main-axis gap in px between the target and the dropdown.
`onClose`	`(() => void) \| undefined`	—	Called when the dropdown closes.
`onOpen`	`(() => void) \| undefined`	—	Called when the dropdown opens.
`onPositionChange`	`((position: HoverCardPosition) => void) \| undefined`	—	Called with the RESOLVED placement whenever it changes (e.g. on flip/shift).
`openDelay`	`number \| undefined`	`0`	Delay in ms before the dropdown opens on hover.
`overlayProps`	`Partial<OverlayProps> \| undefined`	—
`position`	`Placement \| undefined` top · top-start · top-end · bottom · bottom-start · bottom-end · left · left-start · left-end · right · right-start · right-end	`'bottom'`	Dropdown placement relative to the target.
`radius` system	`RadiusTokens \| undefined`	—	Dropdown border radius token.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xs · sm · md · lg · xl	`'md'`	Dropdown shadow scale.
`styles` system	`SlotStyles<HoverCardStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`transitionProps`	`OverlayTransitionConfig \| undefined`	`{ transition: 'fade', duration: 150, timingFunction: 'ease-in-out' }`	Enter/exit animation: { transition, duration, exitDuration, timingFunction }. Defaults to a 150ms fade.
`width`	`HoverCardWidth \| undefined`	`'max-content'`	Dropdown width; 'target' matches the trigger width.
`withArrow`	`boolean \| undefined`	`false`	Render an arrow pointing at the target.
`withinPortal`	`boolean \| undefined`	`true`	Render the dropdown in a portal.
`withOverlay`	`boolean \| undefined`	`false`	Render a full-cover `Overlay` scrim behind the open dropdown.
`zIndex`	`number \| undefined`	`300`	Dropdown `z-index`.

Style slots

Every part of HoverCard can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`arrow`	`styles={{ arrow: { … } }}`
`dropdown`	`styles={{ dropdown: { … } }}`
`overlay`	`styles={{ overlay: { … } }}`
`target`	`styles={{ target: { … } }}`