Hover Card

Display a summary/preview of a link.

<script lang="ts">
	import { Hovercard, HovercardTrigger, HovercardContent, HovercardArrow } from 'lithesome';
	import { cn } from '$site/utils.js';
	import { BookIcon, StarIcon } from 'lucide-svelte';
	import { fly } from 'svelte/transition';
</script>

<Hovercard>
	<HovercardTrigger>
		<a
			href="https://github.com/Gibbu"
			target="_blank"
			rel="noopener noreferrer"
			class="block size-12 overflow-hidden rounded-full border-2 border-black shadow-md shadow-black/30 dark:border-white"
		>
			<img src="https://github.com/Gibbu.png" alt="GitHub avatar" class="w-full" />
		</a>
	</HovercardTrigger>
	<HovercardContent
		transition={[fly, { y: 5, duration: 200 }]}
		class={cn(
			'w-[300px] origin-top translate-y-3 rounded-xl border p-4 shadow-xl backdrop-blur ',
			'border-neutral-300 bg-white shadow-neutral-200',
			'dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-[#111]'
		)}
	>
		<HovercardArrow
			class={cn(
				'size-3 rotate-45 border-l border-t',
				'border-neutral-300 bg-white',
				'dark:border-neutral-700 dark:bg-neutral-900'
			)}
		/>
		<header class="flex items-center gap-4">
			<img src="https://github.com/Gibbu.png" alt="GitHub avatar" class="block size-10 rounded-full" />
			<div>
				<h4 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">Gibbu</h4>
				<p class="text-sm text-neutral-400 dark:text-neutral-500">Hobbyist web dev</p>
			</div>
		</header>
		<footer class="mt-4 flex items-center gap-4">
			<div class="flex items-center gap-2 text-sm">
				<BookIcon class="size-4" />
				18 Repositories
			</div>
			<div class="flex items-center gap-2 text-sm">
				<StarIcon class="size-4" />
				66 Stars
			</div>
		</footer>
	</HovercardContent>
</Hovercard>

API Reference

Hovercard

Prop	Type	Description
`delay`	`number \| [number, number]` `Default: 700`	The delay between the the content being visible or not.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the content is visible or not.

Data attribute	Value	Description
`data-hovercard`	`''`	The base data attribute, can be used for styling.
`data-state`	`'opened' \| 'closed'`	Whether or not the content is visible or not.

HovercardTrigger

This component is a child of Hovercard

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the content is visible or not.

Data attribute	Value	Description
`data-hovercardtrigger`	`''`	The base data attribute, can be used for styling.

HovercardContent

This component is a child of Hovercard

Prop	Type	Description
`placement`	`Placement` `Default: bottom`	The FloatingUI placement string.
`constrainViewport`	`boolean` `Default: false`	Keeps the content dropdown from ever growing outside of the viewport.
`sameWidth`	`boolean` `Default: false`	Makes the content dropdown the same width as the trigger.
`portalTarget`	`strng \| HTMLElement` `Default: 'body'`	The target position for the content dropdown to be mounted.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.

Data attribute	Value	Description
`data-hovercardcontent`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`	The position of the content dropdown relative to the trigger.
`data-alignment`	`'start' \| 'center' \| 'end'`	The alignment of content dropdown relative to the trigger.

Event	Param & Return	Description
`onMouseenter`	`(e: MouseEnter)` `void`
`onMouseleave`	`(e: MouseEnter)` `void`

HovercardArrow

This component is a child of HovercardContent

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Data attribute	Value	Description
`data-hovercardarrow`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`

Basic Example

<script>
	import { Hovercard, HovercardTrigger, HovercardContent, HovercardArrow } from 'lithesome';
</script>

<Hovercard>
	<HovercardTrigger>
		<button></button>
	</HovercardTrigger>
	<HovercardContent>
		<HovercardArrow />
	</HovercardContent>
</Hovercard>

Delaying visiblity of the content

If you wish have different delays between the opening and closing of the content, pass the delay prop to the Hovercard component.

Passing a number will set both in and out delays. Passing an array of 2 indexes will set the in and out separately.

<Hovercard delay={[1000, 0]}>
	<HovercardTrigger>
		<button></button>
	</HovercardTrigger>
	<HovercardContent />
</Hovercard>