Hover card

A richer tooltip: the same manual popover, kept open while the pointer is on the trigger or the panel. Paste the markup first. Copy src/components/ui/Place.svelte (see Popover). Preview uses initials, not a remote image.

Preview

Markup

<a href="/">@alumna</a>
<div popover="manual" class="popover hover-card" role="dialog" tabindex="-1" aria-label="@alumna" data-side="bottom" data-align="start">
	<div class="cluster" style="--cluster-gap: 0.75rem; align-items: start">
		<span class="avatar">AL</span>
		<div class="stack" style="--stack-gap: 0.25rem">
			<div class="popover-title">@alumna</div>
			<p class="popover-description">A compile-time framework for apps.</p>
		</div>
	</div>
</div>

Imported

<script>
	import { hover_enter, hover_leave, hover_panel_enter, hover_panel_leave, hide_on_escape } from './ui/Place.svelte';
	let card;
</script>

<a
	href="/"
	onmouseenter={(event) => hover_enter(event, card)}
	onmouseleave={(event) => hover_leave(event, card)}
	onfocus={(event) => hover_enter(event, card)}
	onblur={(event) => hover_leave(event, card)}
	onkeydown={(event) => hide_on_escape(event, card)}
>@alumna</a>
<div
	bind:this={card}
	popover="manual"
	class="popover hover-card"
	role="dialog"
	tabindex="-1"
	aria-label="@alumna"
	data-side="bottom"
	data-align="start"
	onmouseenter={hover_panel_enter}
	onmouseleave={hover_panel_leave}
>
	<div class="cluster" style="--cluster-gap: 0.75rem; align-items: start">
		<span class="avatar">AL</span>
		<div class="stack" style="--stack-gap: 0.25rem">
			<div class="popover-title">@alumna</div>
			<p class="popover-description">A compile-time framework for apps.</p>
		</div>
	</div>
</div>