Hover Card

A card of preview content shown on hover.

Installation

npx lily-svelte@latest add hover-card

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the hover-card source from the registry into `$lib/components/ui/hover-card`.

Usage

<script lang="ts">
	import { HoverCard, HoverCardTrigger, HoverCardContent } from '$lib/components/ui/hover-card';
</script>
 
<HoverCard>
	<HoverCardTrigger href="https://example.com">@example</HoverCardTrigger>
	<HoverCardContent>Preview content</HoverCardContent>
</HoverCard>

← Form Image Cropper →