Hover Card

Card that appears on hover with a delay.

Components

Hover Card

feedback

interactive

<arc-hover-card>

Overview

HoverCard displays a floating card with supplementary content when the user hovers over or focuses a trigger element. Unlike Tooltip (which shows a short text label), HoverCard is designed for richer content — user profile previews, link metadata, product summaries, or any structured information that benefits from appearing on demand without a click. The card appears after a configurable `open-delay` (default 400ms) and disappears after a `close-delay` (default 300ms) once the cursor leaves the trigger. Critically, moving the cursor from the trigger into the card itself cancels the close timer, so users can interact with links, buttons, or text inside the card without it vanishing. This enter-to-keep-open pattern is essential for hover-based rich content panels. The card supports four positions — `bottom` (default), `top`, `left`, and `right` — set via the `position` attribute, which controls the CSS absolute positioning relative to the trigger. The card animates in with a scale transition from 0.96 to 1 and fades in via opacity, and the transition respects ARC design token timing variables. Pressing Escape while the card is visible hides it immediately. The trigger is provided via the default slot, and the card content goes in the `content` named slot.

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

Do not use HoverCard for critical information that the user must see — hover is not discoverable on touch devices
Do not place complex interactive forms inside the card; use a Popover or Modal for those use cases
Do not set open-delay to 0, as this causes cards to flash on every accidental hover
Do not nest a HoverCard inside another HoverCard — the stacking and delay logic will conflict
Do not 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';

export default function Example() {
  return (
    <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: `
    <arc-hover-card>
      <arc-button variant="secondary">Hover me</arc-button>
      <div slot="content">Additional details on hover.</div>
    </arc-hover-card>
  `,
})
export class MyComponent {}

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

export default function Example() {
  return (
    <HoverCard>
      <Button variant="secondary">Hover me</Button>
      <div slot="content">Additional details on hover.</div>
    </HoverCard>
  );
}

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

export default function Example() {
  return (
    <HoverCard>
      <Button variant="secondary">Hover me</Button>
      <div slot="content">Additional details on hover.</div>
    </HoverCard>
  );
}

API

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

arc-open: Fired when the hover card becomes visible
arc-close: Fired when the hover card hides

Hover Card

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight