1<script lang="ts"> 2 import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days'; 3 import * as Avatar from '../avatar/index.js'; 4 import * as HoverCard from './index.js'; 5</script> 6 7<HoverCard.Root> 8 <HoverCard.Trigger 9 href="https://github.com/sveltejs" 10 target="_blank" 11 rel="noreferrer noopener" 12 class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black" 13 > 14 @sveltejs 15 </HoverCard.Trigger> 16 <HoverCard.Content class="w-80"> 17 <div class="flex justify-between space-x-4"> 18 <Avatar.Root> 19 <Avatar.Image src="https://github.com/sveltejs.png" /> 20 <Avatar.Fallback>SK</Avatar.Fallback> 21 </Avatar.Root> 22 <div class="space-y-1"> 23 <h4 class="text-sm font-semibold">@sveltejs</h4> 24 <p class="text-sm">Cybernetically enhanced web apps.</p> 25 <div class="flex items-center pt-2"> 26 <CalendarDaysIcon class="me-2 size-4 opacity-70" /> 27 <span class="text-xs text-muted-foreground">Joined September 2022</span> 28 </div> 29 </div> 30 </div> 31 </HoverCard.Content> 32</HoverCard.Root> 33

Installation

Usage

Use hover-card to preview linked content on hover. Built on bits-ui’s LinkPreview primitive. Compose Root, Trigger, and Content.

1<script lang="ts">
2	import * as HoverCard from '~/components/hover-card';
3</script>
4
5<HoverCard.Root>
6	<HoverCard.Trigger
7		href="https://github.com/sveltejs"
8		target="_blank"
9		rel="noreferrer noopener"
10		class="underline-offset-4 hover:underline"
11	>
12		@sveltejs
13	</HoverCard.Trigger>
14	<HoverCard.Content class="w-80">
15		<p class="text-sm">Cybernetically enhanced web apps.</p>
16	</HoverCard.Content>
17</HoverCard.Root>