Docs
Hover Card
Hover Card
For sighted users to preview content available behind a link.
import type { HoverCardTriggerProps } from "@kobalte/core/hover-card";
import { Button } from "@repo/tailwindcss/ui/button";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@repo/tailwindcss/ui/hover-card";
import { Image, ImageFallback, ImageRoot } from "@repo/tailwindcss/ui/image";
const HoverCardDemo = () => {
return (
<HoverCard>
<HoverCardTrigger
as={(props: HoverCardTriggerProps) => (
<Button variant="link" {...props}>
@solid_js
</Button>
)}
/>
<HoverCardContent class="w-80">
<div class="flex justify-between space-x-4">
<ImageRoot fallbackDelay={400}>
<Image src="https://github.com/solidjs.png" />
<ImageFallback>SJ</ImageFallback>
</ImageRoot>
<div class="space-y-1">
<h4 class="text-sm font-semibold">@solid_js</h4>
<p class="text-sm">
Simple and performant reactivity for building user interfaces.
</p>
<div class="flex items-center pt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-2 h-4 w-4 opacity-70"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm12-4v4M8 3v4m-4 4h16m-9 4h1m0 0v3"
/>
</svg>
<span class="text-xs text-muted-foreground">
Joined March 2021
</span>
</div>
</div>
</div>
</HoverCardContent>
</HoverCard>
);
};
export default HoverCardDemo;Installation
npx shadcn-solid@latest add hover-cardInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { HoverCardContentProps } from "@kobalte/core/hover-card";
import { HoverCard as HoverCardPrimitive } from "@kobalte/core/hover-card";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const HoverCard = HoverCardPrimitive;
export const HoverCardTrigger = HoverCardPrimitive.Trigger;
type hoverCardContentProps<T extends ValidComponent = "div"> =
HoverCardContentProps<T> & {
class?: string;
};
export const HoverCardContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, hoverCardContentProps<T>>,
) => {
const [local, rest] = splitProps(props as hoverCardContentProps, ["class"]);
return (
<HoverCardPrimitive.Portal>
<HoverCardPrimitive.Content
class={cn(
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
local.class,
)}
{...rest}
/>
</HoverCardPrimitive.Portal>
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { HoverCardContentProps } from "@kobalte/core/hover-card";
import { HoverCard as HoverCardPrimitive } from "@kobalte/core/hover-card";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const HoverCard = HoverCardPrimitive;
export const HoverCardTrigger = HoverCardPrimitive.Trigger;
type hoverCardContentProps<T extends ValidComponent = "div"> =
HoverCardContentProps<T> & {
class?: string;
};
export const HoverCardContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, hoverCardContentProps<T>>,
) => {
const [local, rest] = splitProps(props as hoverCardContentProps, ["class"]);
return (
<HoverCardPrimitive.Portal>
<HoverCardPrimitive.Content
class={cn(
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[expanded]:(animate-in fade-in-0 zoom-in-95) data-[closed]:(animate-out fade-out-0 zoom-out-95)",
local.class,
)}
{...rest}
/>
</HoverCardPrimitive.Portal>
);
};Usage
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
SolidJS - Simple and performant reactivity for building user interfaces.
</HoverCardContent>
</HoverCard>