HoverCard
Usage
Delays
Set open and close delays in ms with openDelay
and closeDelay
props:
With interactive elements
HoverCard
is displayed only when mouse is over target element or dropdown,
you can use anchors and buttons within dropdowns, using inputs is not recommended:
HoverCard.Target children
HoverCard.Target
requires an element or a component as a single child –
strings, fragments, numbers and multiple elements/components are not supported and will throw error.
Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box.
Required ref prop
Custom components that are rendered inside HoverCard.Target
are required to support ref
prop:
Use forwardRef
function to forward ref to root element:
Accessibility
HoverCard
is ignored by screen readers and cannot be activated with keyboard, use it to display only additional information
that is not required to understand the context.
HoverCard component props
Name | Type | Description |
---|---|---|
arrowOffset | number | Arrow offset |
arrowPosition | "center" | "side" | Arrow position * |
arrowRadius | number | Arrow border-radius |
arrowSize | number | Arrow size |
children | ReactNode | HoverCard.Target and HoverCard.Dropdown components |
closeDelay | number | Close delay in ms |
disabled | boolean | If set, popover dropdown will not render |
initiallyOpened | boolean | Initial opened state |
keepMounted | boolean | If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
middlewares | PopoverMiddlewares | Floating ui middlewares to configure position handling |
offset | number | FloatingAxesOffsets | Default Y axis or either (main, cross, alignment) X and Y axis space between target element and dropdown |
onClose | () => void | Called when dropdown is closed |
onOpen | () => void | Called when dropdown is opened |
onPositionChange | (position: FloatingPosition) => void | Called when dropdown position changes |
openDelay | number | Open delay in ms |
portalProps | Omit<PortalProps, "children" | "withinPortal"> | Props to pass down to the portal when withinPortal is true |
position | "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | Dropdown position relative to target |
positionDependencies | any[] | useEffect dependencies to force update dropdown position |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
returnFocus | boolean | Determines whether focus should be automatically returned to control when dropdown closes, false by default |
shadow | MantineShadow | Key of theme.shadow or any other valid css box-shadow value |
transitionProps | Partial<Omit<TransitionProps, "mounted">> | Props added to Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: 'fade' } by default |
width | PopoverWidth | Dropdown width, or 'target' to make dropdown width the same as target element |
withArrow | boolean | Determines whether component should have an arrow |
withinPortal | boolean | Determines whether dropdown should be rendered within Portal, defaults to false |
zIndex | ZIndex | Dropdown z-index |
HoverCard.Target component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Target element |
popupType | string | Popup accessible type, 'dialog' by default |
refProp | string | Key of the prop that should be used to get element ref |
shouldOverrideDefaultTargetId | boolean | Determines whether component should override default id of target element, defaults to true |
HoverCard.Dropdown component props
Name | Type | Description |
---|---|---|
children | ReactNode | Dropdown content |
HoverCard component Styles API
Name | Static selector | Description |
---|---|---|
dropdown | .asuikit-HoverCard-dropdown | Dropdown root element |
arrow | .asuikit-HoverCard-arrow | Dropdown arrow |