Overlays

HoverCard

Hover-and-focus triggered rich preview card for non-interactive contextual content.

import { HoverCard } from '@lostgradient/cinder/hover-card';
overlayhover
01

Overview

Hover-and-focus triggered rich preview card for non-interactive contextual content.

Usage

svelte 
<script lang="ts">
  import { HoverCard } from '@lostgradient/cinder/hover-card';
</script>

Guidance

Use When

  • Showing a profile, issue, or metadata preview that is richer than a tooltip but still read-only.
  • Revealing supplementary preview content on pointer hover or keyboard focus without moving focus.

Avoid When

  • The floating content contains focusable controls — use popover.
  • The trigger needs a short accessible description — use tooltip.
Live preview
02

When to use

Use when
  • Showing a profile, issue, or metadata preview that is richer than a tooltip but still read-only.
  • Revealing supplementary preview content on pointer hover or keyboard focus without moving focus.
Avoid when
  • The floating content contains focusable controls — use popover.
  • The trigger needs a short accessible description — use tooltip.
03

Examples

Basic hover card

A rich non-interactive preview that opens on hover or focus.

Custom hover delays

Hover cards can tune open and close delay for denser interfaces.

04

Props

Props for hover-card
Name Type Default Required Bindable Description
open boolean false bind Controls the open state of the card; bindable for controlled usage.
onOpenChange (open: boolean) => void
openDelay number 300 Delay in milliseconds before the card opens after the pointer enters or focus lands on the trigger. Default 300.
closeDelay number 150 Delay in milliseconds before the card closes after the pointer leaves and focus departs. Default 150.
placement 'top''top-start''top-end''right''right-start''right-end''bottom''bottom-start''bottom-end''left''left-start''left-end' 'bottom-start' Preferred placement of the card relative to the trigger. Default bottom-start.
offset number 8 Distance in pixels between the trigger and the card. Default 8.
arrowVisible boolean false When true, renders a directional arrow pointing from the card toward the trigger. Default false.
trigger snippet req
children snippet req
triggerRef HTMLElement | null null
description text Visually hidden text wired to the trigger via aria-describedby for assistive technology context.