Hover Card

Guidelines
React API Reference

Hover cards provide contextual information on demand, allowing users to preview content or get additional details without leaving their current context or navigating away from the page.

Guidance

Aspect	Best Practice
Usage	Use for previewing content, showing user profiles, displaying additional context, or providing supplementary information on hover.
Content	Keep content concise and relevant. Include key information that helps users make decisions without overwhelming them.
Behavior	Display on hover with a slight delay. Support keyboard navigation and ensure content is accessible via focus states.
States	Provide smooth enter/exit animations. Ensure the card stays visible when users move cursor into the content area.
Feedback	Use subtle animations and appropriate positioning to avoid blocking important content on the page.
Examples	User profile previews, link previews, help tooltips, image details, or any content that benefits from contextual preview.

Best Practices

Progressive Disclosure: Show just enough information to be helpful without overwhelming users.
Appropriate Timing: Use reasonable delays before showing/hiding to prevent flickering on quick mouse movements.
Smart Positioning: Position cards to avoid covering important content or going off-screen.
Keyboard Accessible: Ensure hover cards can be accessed and dismissed using keyboard navigation.
Mobile Consideration: Consider alternative patterns for touch devices where hover doesn’t exist.

Do’s and Don’ts

Do

Use for supplementary information that enhances the experience. * Keep content focused and relevant to the trigger element. * Provide smooth transitions and appropriate delays. * Ensure keyboard and screen reader accessibility.

Don't

Use for critical information that users must see. * Make hover cards too large or complex. * Block important content with poorly positioned cards. * Rely solely on hover for touch device users.

Additional Guidance

Psychological Impact:
- Reduced Cognitive Load: Users can get context without breaking their mental flow.
- Confidence Building: Preview capabilities help users make informed decisions before clicking.
- Efficiency: Quick access to information reduces the need for navigation and back-button usage.

Import

import from

'@strongtie/design-system/hover-card'; ```
</Step>
<Step title="Usage">
```jsx
<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    <p>Additional information appears here</p>
  </HoverCardContent>
</HoverCard>

`<HoverCard>` Props

defaultOpen

boolean

The open state of the hover card when it is initially rendered.

open

boolean

The controlled open state of the hover card.

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.

`<HoverCardTrigger>` Props

asChild

boolean

default:"false"

If true, the hover card trigger will render as a child component.

`<HoverCardContent>` Props

asChild

boolean

default:"false"

If true, the hover card content will render as a child component.

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 | null | Array<Element | null>

default:"[]"

The element used as the collision boundary.

collisionPadding

number | Partial<Record<Side, number>>

default:"0"

The distance in pixels from the boundary edges where collision detection should occur.

side

"top" | "right" | "bottom" | "left"

default:"\"bottom\""

The preferred side of the trigger to render against when open.

sideOffset

number

default:"4"

The distance in pixels from the trigger.

arrowPadding

number

default:"0"

The padding between the arrow and the edges of the content.

hideWhenDetached

boolean

default:"false"

Whether to hide the content when the trigger becomes fully occluded.

sticky

"partial" | "always"

default:"\"partial\""

The sticky behavior on the align axis.

onEscapeKeyDown

(event: KeyboardEvent) => void

Event handler called when the escape key is down.

onPointerDownOutside

(event: PointerDownOutsideEvent) => void

Event handler called when a pointer event happens outside of the component.

onFocusOutside

(event: FocusOutsideEvent) => void

Event handler called when focus moves outside of the component.

onInteractOutside

(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when an interaction happens outside the component.

forceMount

boolean

Used to force mounting when more control is needed.

Usage Examples

<HoverCard>
  <HoverCardTrigger>
    <button>Hover for info</button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="p-4">
      <h4>Quick Info</h4>
      <p>This is additional context that appears on hover.</p>
    </div>
  </HoverCardContent>
</HoverCard>

Styling Classes

The following CSS classes are applied by the Hover Card components:

hover-card-content – The content container with positioning and animation styles

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<HoverCard>` Props

`<HoverCardTrigger>` Props

`<HoverCardContent>` Props

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<HoverCard> Props

​<HoverCardTrigger> Props

​<HoverCardContent> Props

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<HoverCard>` Props

`<HoverCardTrigger>` Props

`<HoverCardContent>` Props

Usage Examples

Styling Classes