
Chakra UI
The most powerful toolkit for building modern web applications.
2.5M Downloads
import {
Avatar,
HStack,
HoverCard,
Icon,
Link,
Portal,
Stack,
Text,
} from "@chakra-ui/react"
import { LuChartLine } from "react-icons/lu"
const Demo = () => {
return (
<HoverCard.Root size="sm">
<HoverCard.Trigger asChild>
<Link href="#">@chakra_ui</Link>
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="4" direction="row">
<Avatar.Root>
<Avatar.Image src="https://pbs.twimg.com/profile_images/1244925541448286208/rzylUjaf_400x400.jpg" />
<Avatar.Fallback name="Chakra UI" />
</Avatar.Root>
<Stack gap="3">
<Stack gap="1">
<Text textStyle="sm" fontWeight="semibold">
Chakra UI
</Text>
<Text textStyle="sm" color="fg.muted">
The most powerful toolkit for building modern web
applications.
</Text>
</Stack>
<HStack color="fg.subtle">
<Icon size="sm">
<LuChartLine />
</Icon>
<Text textStyle="xs">2.5M Downloads</Text>
</HStack>
</Stack>
</Stack>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
}
Usage
import { HoverCard } from "@chakra-ui/react"
<HoverCard.Root>
<HoverCard.Trigger />
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
</HoverCard.Content>
</HoverCard.Positioner>
</HoverCard.Root>
Shortcuts
The HoverCard
provides a shortcuts for common use cases.
Arrow
The HoverCard.Arrow
renders the HoverCard.ArrowTip
component within in by
default.
This works:
<HoverCard.Arrow>
<HoverCard.ArrowTip />
</HoverCard.Arrow>
This might be more concise, if you don't need to customize the arrow tip.
<HoverCard.Arrow />
Examples
Controlled
Use the open
and onOpenChange
to control the visibility of the hover card.
"use client"
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
import { useState } from "react"
const Demo = () => {
const [open, setOpen] = useState(false)
return (
<HoverCard.Root size="sm" open={open} onOpenChange={(e) => setOpen(e.open)}>
<HoverCard.Trigger asChild>
<Link href="#">@chakra_ui</Link>
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content maxWidth="240px">
<HoverCard.Arrow />
<Box>
<Strong>Chakra</Strong> is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
</Box>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
}
Delays
Control the open and close delays using the openDelay
and closeDelay
props.
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
const Demo = () => {
return (
<HoverCard.Root size="sm" openDelay={1000} closeDelay={100}>
<HoverCard.Trigger asChild>
<Link href="#">@chakra_ui</Link>
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content maxWidth="240px">
<HoverCard.Arrow />
<Box>
<Strong>Chakra</Strong> is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
</Box>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
}
Placement
Use the positioning.placement
prop to configure the underlying floating-ui
positioning logic.
import { Box, HoverCard, Link, Portal, Strong } from "@chakra-ui/react"
const Demo = () => {
return (
<HoverCard.Root size="sm" positioning={{ placement: "top" }}>
<HoverCard.Trigger asChild>
<Link href="#">@chakra_ui</Link>
</HoverCard.Trigger>
<Portal>
<HoverCard.Positioner>
<HoverCard.Content maxWidth="240px">
<HoverCard.Arrow />
<Box>
<Strong>Chakra</Strong> is a Sanskrit word that means disk or
wheel, referring to energy centers in the body
</Box>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
)
}
Within Dialog
Here's an example of how to use the HoverCard
within a Dialog
component.
Due to the focus trap within the dialog, it's important to change the portal target from the document's body to the dialog's content.
"use client"
import {
Button,
CloseButton,
Dialog,
HoverCard,
Link,
Portal,
Stack,
Text,
} from "@chakra-ui/react"
import { useRef } from "react"
const Demo = () => {
const contentRef = useRef<HTMLDivElement>(null)
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<Button variant="outline">Open Dialog</Button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content ref={contentRef}>
<Dialog.CloseTrigger asChild>
<CloseButton size="sm" />
</Dialog.CloseTrigger>
<Dialog.Header>
<Dialog.Title>Select in Dialog</Dialog.Title>
</Dialog.Header>
<Dialog.Body>
<HoverCard.Root size="sm">
<HoverCard.Trigger asChild>
<Link href="#">@chakra_ui</Link>
</HoverCard.Trigger>
<Portal container={contentRef}>
<HoverCard.Positioner>
<HoverCard.Content>
<HoverCard.Arrow />
<Stack gap="1">
<Text textStyle="sm" fontWeight="semibold">
Chakra UI
</Text>
<Text textStyle="sm" color="fg.muted">
The most powerful toolkit for building modern web
applications.
</Text>
</Stack>
</HoverCard.Content>
</HoverCard.Positioner>
</Portal>
</HoverCard.Root>
</Dialog.Body>
<Dialog.Footer />
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
)
}
Alternatively, you can avoid portalling the HoverCard.Positioner
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
Prop | Default | Type |
---|---|---|
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' 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. |