8.0k New

Hover Card

Previous Next

For sighted users to preview content available behind a link.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<script lang="ts">
  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<HoverCard.Root openDelay={10} closeDelay={100}>
  <HoverCard.Trigger class={buttonVariants({ variant: "link" })}
    >Hover Here</HoverCard.Trigger
  >
  <HoverCard.Content class="flex w-64 flex-col gap-0.5">
    <div class="font-semibold">@sveltejs</div>
    <div>
      Cybernetically enhanced web apps – created and maintained by @vercel.
    </div>
    <div class="mt-1 text-xs text-muted-foreground">Joined December 2021</div>
  </HoverCard.Content>
</HoverCard.Root>

Installation 

pnpm dlx shadcn-svelte@latest add hover-card

Usage 

<script lang="ts">
  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
</script>
<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content>
    SvelteKit - Web development, streamlined
  </HoverCard.Content>
</HoverCard.Root>

Trigger Delays

Use openDelay and closeDelay on HoverCard.Root to control when the card opens and closes.

<HoverCard.Root openDelay={100} closeDelay={200}>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content>Content</HoverCard.Content>
</HoverCard.Root>

Positioning

Use the side and align props on HoverCard.Content to control placement.

<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content side="top" align="start">Content</HoverCard.Content>
</HoverCard.Root>

Basic 

<script lang="ts">
  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<HoverCard.Root openDelay={10} closeDelay={100}>
  <HoverCard.Trigger class={buttonVariants({ variant: "link" })}
    >Hover Here</HoverCard.Trigger
  >
  <HoverCard.Content class="flex w-64 flex-col gap-0.5">
    <div class="font-semibold">@sveltejs</div>
    <div>
      Cybernetically enhanced web apps – created and maintained by @vercel.
    </div>
    <div class="mt-1 text-xs text-muted-foreground">Joined December 2021</div>
  </HoverCard.Content>
</HoverCard.Root>

Sides 

<script lang="ts">
  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import { cn } from "$lib/utils.js";
 
  const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const;
</script>
 
<div class="flex flex-wrap justify-center gap-2">
  {#each HOVER_CARD_SIDES as side (side)}
    <HoverCard.Root openDelay={100} closeDelay={100}>
      <HoverCard.Trigger
        class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
      >
        {side}
      </HoverCard.Trigger>
      <HoverCard.Content {side}>
        <div class="flex flex-col gap-1">
          <h4 class="font-medium">Hover Card</h4>
          <p>This hover card appears on the {side} side of the trigger.</p>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  {/each}
</div>