Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Hover Card

Used to display content when hovering over an element

SourceStorybookRecipeArk
@chakra_ui

Setup

If you don't already have the snippet, run the following command to add the hover-card snippet

chakra snippet add hover-card

The snippet includes component compositions based on the HoverCard component.

Usage

import {
  HoverCardArrow,
  HoverCardContent,
  HoverCardRoot,
  HoverCardTrigger,
} from "@/components/ui/popover"
<HoverCardRoot>
  <HoverCardTrigger />
  <HoverCardContent>
    <HoverCardArrow />
  </HoverCardContent>
</HoverCardRoot>

Examples

Controlled

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

@chakra_ui

Delays

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

@chakra_ui

Placement

Use the positioning.placement prop to configure the underlying floating-ui positioning logic.

@chakra_ui

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

PropDefaultType
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.

unmountOnExit false
boolean

Whether to unmount on exit.

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg'

The size of the component

defaultOpen
boolean

The initial open state of the hover card when it is first rendered. Use when you do not need to control its open state.

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
() => void

Function called when the animation ends in the closed state

onOpenChange
(details: OpenChangeDetails) => void

Function called when the hover card opens or closes.

open
boolean

Whether the hover card is open

positioning
PositioningOptions

The user provided options used to position the popover content

present
boolean

Whether the node is present (controlled by the user)

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Previous

File Upload

Next

Icon