Hover Card — ARC UI

Components

Hover Card

feedback

interactive

<arc-hover-card>

Overview

Guidelines

When to use

Use HoverCard for supplementary content that enriches the trigger without requiring a click (e.g., user profile previews)
Keep card content concise -- a heading, a few lines of text, and optionally a link or action
Set position to avoid clipping against viewport edges; "top" works well for triggers near the bottom of the page
Increase open-delay for triggers in dense layouts to prevent accidental activation during quick mouse traversal
Test with keyboard navigation to ensure the card is accessible via focus-in on the trigger

When not to use

Use HoverCard for critical information that the user must see -- hover is not discoverable on touch devices
Place complex interactive forms inside the card; use a Popover or Modal for those use cases
Set open-delay to 0, as this causes cards to flash on every accidental hover
Nest a HoverCard inside another HoverCard -- the stacking and delay logic will conflict
Forget the content slot; without it, the card renders as an empty floating panel

Features

Rich content popover for profiles, previews, and structured hover information
Configurable open-delay and close-delay with sensible defaults (400ms / 300ms)
Enter-to-keep-open: moving the cursor into the card cancels the close timer
Four positioning options: bottom, top, left, right via the position attribute
Scale and opacity entrance animation using ARC design token transition timing
Escape key dismissal for keyboard accessibility
Focus-in and focus-out support so keyboard users can trigger the card via tab navigation
arc-open and arc-close custom events for tracking card visibility state

Preview

Hover for details

Alice Chen Senior Engineer @ Arclight San Francisco, CA

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-hover-card>
  <arc-button variant="secondary">Hover me</arc-button>
  <div slot="content">Additional details on hover.</div>
</arc-hover-card>

import { Button, HoverCard } from '@arclux/arc-ui-react';

<HoverCard>
  <Button variant="secondary">Hover me</Button>
  <div slot="content">Additional details on hover.</div>
</HoverCard>

<script setup>
import { Button, HoverCard } from '@arclux/arc-ui-vue';
</script>

<template>
  <HoverCard>
    <Button variant="secondary">Hover me</Button>
    <div slot="content">Additional details on hover.</div>
  </HoverCard>
</template>

<script>
  import { Button, HoverCard } from '@arclux/arc-ui-svelte';
</script>

<HoverCard>
  <Button variant="secondary">Hover me</Button>
  <div slot="content">Additional details on hover.</div>
</HoverCard>

import { Component } from '@angular/core';
import { Button, HoverCard } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, HoverCard],
  template: `
    <HoverCard>
      <Button variant="secondary">Hover me</Button>
      <div slot="content">Additional details on hover.</div>
    </HoverCard>
  `,
})
export class MyComponent {}

import { Button, HoverCard } from '@arclux/arc-ui-solid';

<HoverCard>
  <Button variant="secondary">Hover me</Button>
  <div slot="content">Additional details on hover.</div>
</HoverCard>

import { Button, HoverCard } from '@arclux/arc-ui-preact';

<HoverCard>
  <Button variant="secondary">Hover me</Button>
  <div slot="content">Additional details on hover.</div>
</HoverCard>

API

Prop	Type	Default	Description
`position`	`'bottom' \| 'top' \| 'left' \| 'right'`	`'bottom'`	Controls which side of the trigger the card appears on. The card is centered along the perpendicular axis using CSS transforms.
`open-delay`	`number`	`400`	Milliseconds to wait after hover/focus before showing the card. Prevents accidental activation during fast cursor movement.
`close-delay`	`number`	`300`	Milliseconds to wait after the cursor leaves the trigger before hiding the card. Moving into the card cancels this timer.

Events

Event	Description
`arc-open`	Fired when the hover card becomes visible
`arc-close`	Fired when the hover card hides