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 Button from '@lostgradient/cinder/button';
  import HoverCard from '@lostgradient/cinder/hover-card';
</script>

<HoverCard>
  {#snippet trigger()}
    <Button variant="ghost">Ada Lovelace</Button>
  {/snippet}

  <strong>Ada Lovelace</strong>
  <p>Mathematician, writer, and early computing collaborator.</p>
</HoverCard>

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

Arrow indicator

Opens with its pointer arrow visible, pointing back at the trigger that opened it.

Basic hover card

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

Controlled visibility

The open state can be bound and driven externally, letting another control show or hide the card without waiting on hover or focus delays.

Custom hover delays

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

Instant reopen

A zero open delay reopens the card immediately on re-entry, useful for adjacent triggers meant to feel like one continuous surface.

04

Props

Props for hover-card
Name
Type
Default
Description
open bindable boolean false 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'
4 more members '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 required snippet
children required snippet
triggerRef HTMLElement | null null
description text Visually hidden text wired to the trigger via aria-describedby for assistive technology context.