Sivir UI
79

Hover Card

Opens 200 ms after the pointer or focus reaches the trigger and closes 150 ms after it leaves. Give the trigger an href to render it as a link.

@aidan-neel 
<script lang="ts">
    import * as Avatar from '@sivir-ui/svelte/components/avatar';
    import { Button } from '@sivir-ui/svelte/components/button';
    import * as HoverCard from '@sivir-ui/svelte/components/hover-card';
</script>

<HoverCard.Root>
    <HoverCard.Trigger href="https://github.com/aidan-neel">@aidan-neel</HoverCard.Trigger>
    <HoverCard.Content>
        <div class="flex flex-col gap-3">
            <div class="flex items-start justify-between gap-3">
                <Avatar.Root size="lg">
                    <Avatar.Fallback>AN</Avatar.Fallback>
                </Avatar.Root>
                <Button>Follow</Button>
            </div>

            <div class="flex flex-col gap-0.5">
                <HoverCard.Title>Aidan Neel</HoverCard.Title>
                <p class="text-sm text-foreground-muted">@aidan-neel · Seattle, WA</p>
            </div>

            <HoverCard.Description>
                Building Sivir, a themeable Svelte component library.
            </HoverCard.Description>

            <p class="flex gap-4 text-sm text-foreground-muted">
                <span>
                    <span class="font-medium tabular-nums text-foreground">1.2k</span>
                    followers
                </span>
                <span>
                    <span class="font-medium tabular-nums text-foreground">89</span>
                    following
                </span>
            </p>
        </div>
    </HoverCard.Content>
</HoverCard.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add hover-card

Usage

Position the card with side (default bottom) and align (default center) on HoverCard.Content. Change the delays with openDelay and closeDelay on Root.

import * as HoverCard from '@sivir-ui/svelte/components/hover-card';

<HoverCard.Root>
  <HoverCard.Trigger href="/u/mara">@mara</HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Title>Mara Lindqvist</HoverCard.Title>
    <HoverCard.Description>Design engineer on the payments team.</HoverCard.Description>
  </HoverCard.Content>
</HoverCard.Root>

Anatomy

HoverCard.Root - Controls hover card state.

HoverCard.Trigger - Opens the hover card.

HoverCard.Content - Renders hover card content.

HoverCard.Title - Renders the hover card title.

HoverCard.Description - Renders the hover card description.