Hover Card

A card that appears when hovering over a trigger element to display additional information.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/hover-card/hover-card.tsx

import { HoverCard as HoverCardPrimitive } from 'radix-ui'
import * as React from 'react'
import { hoverCardStyles } from './hover-card.css'
 
interface HoverCardProps extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root> {}
 
const HoverCard = ({ openDelay = 40, closeDelay = 40, ...props }: HoverCardProps) => {
  return <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />
}
 
const HoverCardTrigger = HoverCardPrimitive.Trigger
const HoverCardPortal = HoverCardPrimitive.Portal
 
const HoverCardContent = React.forwardRef<
  React.ComponentRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, forwardedRef) => (
  <HoverCardPortal>
    <HoverCardPrimitive.Content
      ref={forwardedRef}
      className={hoverCardStyles({ className })}
      sideOffset={sideOffset}
      align={align}
      {...props}
    />
  </HoverCardPortal>
))
 
HoverCard.displayName = 'HoverCard'
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName
 
export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortal }

Usage

Imports

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
  HoverCardPortal
} from '#/components/hover-card'

Example

Browse the Storybook for more examples.

Anatomy

<HoverCard>
  <HoverCardTrigger />
  <HoverCardPortal>
    <HoverCardContent>
      <HoverCardArrow />
    </HoverCardContent>
  </HoverCardPortal>
</HoverCard>

On this page