Studio
2

Hover Card

Installation

pnpm dlx @mielui/svelte add hover-card

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Put the preview in Content and its link or label in Trigger. The card opens on hover or keyboard focus and stays open as the pointer moves into it. Give Trigger an href for normal link navigation; otherwise it renders a button.

import * as HoverCard from '$lib/mielui/components/hover-card';

<HoverCard.Root>
  <HoverCard.Trigger>@username</HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Title>Full name</HoverCard.Title>
    <HoverCard.Description>Bio or description</HoverCard.Description>
  </HoverCard.Content>
</HoverCard.Root>

Examples

Definition or term

Glass surface

Set surface="glass" on HoverCard.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

HoverCard.Root

Controls hover card state.

Prop Type Default
open Bindable boolean | undefined false
openDelay number | undefined 200
closeDelay number | undefined 150
children Snippet<[]> | undefined —

HoverCard.Content

Renders hover card content.

Prop Type Default
surface "solid" | "glass" | undefined —
side "left" | "right" | "top" | "bottom" | undefined 'bottom'
align "center" | "start" | "end" | undefined 'center'
children Snippet<[]> | undefined —
class string | undefined —

HoverCard.Description

Renders the hover card description.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —

HoverCard.Title

Renders the hover card title.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —

HoverCard.Trigger

Opens the hover card.

Prop Type Default
href string | undefined —
children Snippet<[]> | undefined —
class string | undefined —