Tooltip

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { Component, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as TooltipPrimitive from "@kobalte/core/tooltip";
6

7
import { cn } from "~/lib/utils";
8

9
const TooltipTrigger = TooltipPrimitive.Trigger;
10

11
const Tooltip: Component<TooltipPrimitive.TooltipRootProps> = (props) => {
12
  return <TooltipPrimitive.Root gutter={4} {...props} />;
13
};
14

15
type TooltipContentProps<T extends ValidComponent = "div"> =
16
  TooltipPrimitive.TooltipContentProps<T> & {
17
    class?: string | undefined;
18
  };
19

20
const TooltipContent = <T extends ValidComponent = "div">(
21
  props: PolymorphicProps<T, TooltipContentProps<T>>,
22
) => {
23
  const [local, others] = splitProps(props as TooltipContentProps, ["class"]);
24

25
  return (
26
    <TooltipPrimitive.Portal>
27
      <TooltipPrimitive.Content
28
        data-slot="tooltip-content"
29
        class={cn(
30
          "z-50 origin-[var(--kb-popover-content-transform-origin)] overflow-hidden rounded-base border-2 border-border bg-primary px-3 py-1.5 text-sm text-foreground ui-expanded:animate-in ui-expanded:fade-in-0 ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out-0 ui-closed:zoom-out-95",
31
          local.class,
32
        )}
33
        {...others}
34
      />
35
    </TooltipPrimitive.Portal>
36
  );
37
};
38

39
export { Tooltip, TooltipTrigger, TooltipContent };