Skip to main content

​
Overview

A hover card displays rich content in a popup when hovering over or focusing a trigger element.

​
Features

  • Can be controlled or uncontrolled
  • Customize side, alignment, offsets, collision handling
  • Optionally render in a Portal
  • Supports custom open and close delays
  • Opens on hover or focus
  • Ignores hovering on touch devices

​
Installation

npm install @radix-ui/react-hover-card

​
Anatomy

Import all parts and piece them together. 
import * as HoverCard from '@radix-ui/react-hover-card';

export default () => (
  <HoverCard.Root>
    <HoverCard.Trigger />
    <HoverCard.Portal>
      <HoverCard.Content>
        <HoverCard.Arrow />
      </HoverCard.Content>
    </HoverCard.Portal>
  </HoverCard.Root>
);

​
API Reference

​
Root

Contains all the parts of a hover card.
​
open
boolean
The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
​
defaultOpen
boolean
The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
​
onOpenChange
(open: boolean) => void
Event handler called when the open state of the hover card changes.
​
openDelay
number
default:"700"
The duration from when the mouse enters the trigger until the hover card opens.
​
closeDelay
number
default:"300"
The duration from when the mouse leaves the trigger or content until the hover card closes.

​
Trigger

The link that opens the hover card when hovered.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
By default, renders as an anchor element (<a>).

​
Portal

When used, portals the content part into the body.
​
container
HTMLElement
default:"document.body"
Specify a container element to portal the content into.
​
forceMount
boolean
Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

​
Content

The component that pops out when the hover card is open.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
side
'top' | 'right' | 'bottom' | 'left'
default:"'bottom'"
The preferred side of the trigger to render against when open.
​
sideOffset
number
default:"0"
The distance in pixels from the trigger.
​
align
'start' | 'center' | 'end'
default:"'center'"
The preferred alignment against the trigger. May change when collisions occur.
​
alignOffset
number
default:"0"
An offset in pixels from the “start” or “end” alignment options.
​
avoidCollisions
boolean
default:"true"
When true, overrides the side and align preferences to prevent collisions with boundary edges.
​
collisionBoundary
Element | Element[]
default:"[]"
The element used as the collision boundary. By default this is the viewport.
​
collisionPadding
number | Padding
default:"0"
The distance in pixels from the boundary edges where collision detection should occur.
​
sticky
'partial' | 'always'
default:"'partial'"
The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst always will keep the content in the boundary regardless.
​
hideWhenDetached
boolean
default:"false"
Whether to hide the content when the trigger becomes fully occluded.
​
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
​
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

​
Arrow

An optional arrow element to render alongside the hover card.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child, merging their props and behavior.
​
width
number
default:"10"
The width of the arrow in pixels.
​
height
number
default:"5"
The height of the arrow in pixels.

​
Example

import * as HoverCard from '@radix-ui/react-hover-card';

function HoverCardDemo() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger href="https://twitter.com/radix_ui">
        @radix_ui
      </HoverCard.Trigger>
      <HoverCard.Portal>
        <HoverCard.Content className="hover-card-content">
          <img
            src="https://pbs.twimg.com/profile_images/radix.jpg"
            alt="Radix UI"
          />
          <div>
            <h3>Radix UI</h3>
            <p>Components, icons, and colors for building high-quality web apps.</p>
          </div>
          <HoverCard.Arrow className="hover-card-arrow" />
        </HoverCard.Content>
      </HoverCard.Portal>
    </HoverCard.Root>
  );
}

​
Accessibility

Uses a heuristic to determine when to display the hover card. Opens on hover when the user is using a mouse, and on focus when using keyboard.

​
Keyboard Interactions

  • Tab - Opens the hover card when focus moves to the trigger
  • Shift + Tab - Opens the hover card when focus moves to the trigger
  • Esc - Closes the hover card when it is open

Build docs developers (and LLMs) love

Get started for freeTalk to us