Hover Card

An overlay component that reveals rich preview content when a pointer hovers over a target element.
For more information on this component configuration, visit Radix UI

Placement

Use the side prop on the HoverCard.Content to set the placement of the component. Values can include top, right, bottom, left.

Sizes

Use the hover-card-content-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-hover-card-z-index: 40;
 
  --ex-hover-card-font-size-sm: var(--text-xs);
  --ex-hover-card-font-size-md: var(--text-sm);
  --ex-hover-card-font-size-lg: var(--text-base);
 
  --ex-hover-card-max-w-sm: var(--container-3xs);
  --ex-hover-card-max-w-md: var(--container-2xs);
 
  --ex-hover-card-radius-sm: var(--radius-sm);
  --ex-hover-card-radius-md: var(--radius-sm);
 
  --ex-hover-card-shadow-sm: var(--shadow-sm);
  --ex-hover-card-shadow-md: var(--shadow-sm);
 
  --ex-hover-card-section-gap-x-sm: calc(var(--spacing) * 2);
  --ex-hover-card-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-hover-card-section-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-hover-card-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-hover-card-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-hover-card-section-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-hover-card-section-px-sm: calc(var(--spacing) * 4);
  --ex-hover-card-section-px-md: calc(var(--spacing) * 5);
 
  --ex-hover-card-section-py-sm: calc(var(--spacing) * 4);
  --ex-hover-card-section-py-md: calc(var(--spacing) * 5);
 
  --ex-hover-card-title-font-family: var(--font-sans);
  --ex-hover-card-title-font-weight: var(--font-weight-semibold);
 
  --ex-hover-card-title-font-size-sm: var(--text-sm);
  --ex-hover-card-title-font-size-md: var(--text-base);
 
  --ex-hover-card-description-font-family: var(--font-sans);
  --ex-hover-card-description-font-weight: var(--font-weight-normal);
  --ex-hover-card-description-opacity: var(--ex-options-opacity-muted);
 
  --ex-hover-card-description-font-size-sm: var(--text-xs);
  --ex-hover-card-description-font-size-md: var(--text-sm);
 
  --ex-hover-card-arrow-height-sm: calc(var(--spacing) * 1.75);
  --ex-hover-card-arrow-height-md: calc(var(--spacing) * 1.75);
 
  --ex-hover-card-arrow-width-sm: calc(var(--spacing) * 3.5);
  --ex-hover-card-arrow-width-md: calc(var(--spacing) * 3.5);
}

API

For more information on this component configuration, visit Radix UI

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`closeDelay`	`number`	`300`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`false`
`openDelay`	`number`	`700`
`onOpenChange`	`function`

Hover Card Trigger

Element	Selector
`HoverCard.Trigger`	`.ex-hover-card-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`HoverCard.Content`	`.ex-hover-card-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`center`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`

Element	Selector
`HoverCard.Section`	`.ex-hover-card-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`HoverCard.Title`	`.ex-hover-card-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Element	Selector
`HoverCard.Description`	`.ex-hover-card-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Element	Selector
`HoverCard.Arrow`	`.ex-hover-card-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Hover Card

Placement

Sizes

Customizing

API

Hover Card

Hover Card Trigger

Hover Card Portal

Hover Card Content

Hover Card Section

Hover Card Title

Hover Card Description

Hover Card Arrow