mielui
Overlays

Hover Card

A preview card that opens on hover or focus.

Installation

pnpm dlx @mielui/svelte add hover-card

Usage

Put the link or label in Trigger and the preview in Content. The card opens on hover or keyboard focus and stays open while the pointer moves into it. Give Trigger an href to render a link; without one it renders a button that toggles the card. Bind open on Root to control it from outside.

Title and Description give the card a heading and supporting text. Trigger, Content, Title, and Description accept class; Root renders no element of its own.

<script lang="ts">
    import * as HoverCard from '@mielui/svelte/components/hover-card';
</script>

<HoverCard.Root>
    <HoverCard.Trigger href="https://github.com/mielsense">@mielsense</HoverCard.Trigger>
    <HoverCard.Content>
        <HoverCard.Title>mielsense</HoverCard.Title>
        <HoverCard.Description>Maintains the shared components.</HoverCard.Description>
    </HoverCard.Content>
</HoverCard.Root>

Examples

User mention

A mention inside a sentence previews the profile, with a follow button in the card.

Definition

Placement and timing

placement on Root picks the side of the trigger the card opens on, bottom by default, and an optional -start or -end aligns it to that edge, as in bottom-start. It flips to the opposite side when there is no room. sideOffset on Content sets the gap to the trigger in pixels, 8 by default.

delay and closeDelay on Root set how long the pointer rests before the card opens and how long it stays after the pointer leaves. They default to 200 and 150 milliseconds.

Glass surface

surface="glass" on Content gives the card a translucent, blurred background. Omit surface to inherit --mielui-surface from the theme, or set surface="solid" to override it. Glass falls back to an opaque fill when backdrop filtering is unavailable or reduced transparency is requested.

API reference

HoverCard.Root

Controls hover card state.

  • open Bindable
    boolean

    Whether it is open. Bind it to control the state from outside.

    Default false

  • delay
    number

    Milliseconds the pointer rests on the trigger before the card opens.

    Default 200

  • closeDelay
    number

    Milliseconds after the pointer leaves before the card closes.

    Default 150

  • placement
    HoverCardPlacement

    Preferred side and alignment relative to the trigger, such as bottom-start. It flips when there is no room.

    Default 'bottom'

  • children
    Snippet<[]>

    Content rendered inside.

HoverCard.Content

Renders hover card content.

  • surface
    "solid" | "glass"

    Surface treatment. Omit it to inherit --mielui-surface from the theme.

  • sideOffset
    number

    Gap between the trigger and the card, in pixels.

    Default 8

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.

HoverCard.Description

Renders the hover card description.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

HoverCard.Title

Renders the hover card title.

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.

HoverCard.Trigger

Opens the hover card.

  • href
    string

    Destination of the trigger link. The card previews it.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.