Hover Card

1
import * as HoverCardPrimitive from "@kobalte/core/hover-card";
2
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3
import type { ComponentProps, ValidComponent } from "solid-js";
4
import { mergeProps, splitProps } from "solid-js";
5
import { cn } from "~/lib/utils";
6

7
const HoverCard = (props: HoverCardPrimitive.HoverCardRootProps) => {
8
  const mergedProps = mergeProps({ gutter: 4 }, props);
9
  return <HoverCardPrimitive.Root data-slot="hover-card" {...mergedProps} />;
10
};
11

12
type HoverCardTriggerProps<T extends ValidComponent = "a"> = PolymorphicProps<
13
  T,
14
  HoverCardPrimitive.HoverCardTriggerProps<T>
15
>;
16

17
const HoverCardTrigger = <T extends ValidComponent = "a">(props: HoverCardTriggerProps<T>) => (
18
  <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
19
);
20

21
type HoverCardContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
22
  T,
23
  HoverCardPrimitive.HoverCardContentProps<T>
24
> &
25
  Pick<ComponentProps<T>, "class" | "children">;
26

27
const HoverCardContent = <T extends ValidComponent = "div">(props: HoverCardContentProps<T>) => {
28
  const [local, others] = splitProps(props as HoverCardContentProps, ["class", "children"]);
29
  return (
30
    <HoverCardPrimitive.Portal>
31
      <HoverCardPrimitive.Content
32
        data-slot="hover-card-content"
33
        class={cn(
34
          "z-50 z-hover-card-content origin-(--kb-hovercard-content-transform-origin) outline-hidden",
35
          local.class,
36
        )}
37
        {...others}
38
      >
39
        {local.children}
40
      </HoverCardPrimitive.Content>
41
    </HoverCardPrimitive.Portal>
42
  );
43
};
44

45
export { HoverCard, HoverCardTrigger, HoverCardContent };

import { For } from "solid-js";
import { Button } from "~/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "~/components/ui/hover-card";

const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as const;

function HoverCardSides() {
  return (
    <Example title="Sides">
      <div class="flex flex-wrap items-center justify-center gap-4">
        <For each={HOVER_CARD_SIDES}>
          {(side) => (
            <HoverCard openDelay={100} closeDelay={100} placement={side}>
              <HoverCardTrigger as={Button} variant="outline" class="capitalize">
                {side}
              </HoverCardTrigger>
              <HoverCardContent>
                <div class="flex flex-col gap-1.5">
                  <h4 class="font-medium">Hover Card</h4>
                  <p>This hover card appears on the {side} side of the trigger.</p>
                </div>
              </HoverCardContent>
            </HoverCard>
          )}
        </For>
      </div>
    </Example>
  );
}

import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "~/components/ui/hover-card";

function HoverCardInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger as={Button} variant="outline">
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Hover Card Example</DialogTitle>
            <DialogDescription>
              Hover over the button below to see the hover card.
            </DialogDescription>
          </DialogHeader>
          <HoverCard openDelay={100} closeDelay={100}>
            <HoverCardTrigger as={Button} variant="outline" class="w-fit">
              Hover me
            </HoverCardTrigger>
            <HoverCardContent>
              <div class="flex flex-col gap-1.5">
                <h4 class="font-medium">Hover Card</h4>
                <p>This hover card appears inside a dialog. Hover over the button to see it.</p>
              </div>
            </HoverCardContent>
          </HoverCard>
        </DialogContent>
      </Dialog>
    </Example>
  );
}