Tooltip

1import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6const Tooltip = KobalteTooltip;
7const TooltipTrigger = KobalteTooltip.Trigger;
8 
9const TooltipContent: Component<ComponentProps<typeof KobalteTooltip.Content>> = (props) => {
10  const [local, rest] = splitProps(props, ["class"]);
11  return (
12    <KobalteTooltip.Portal>
13      <KobalteTooltip.Content
14        class={cn(
15          "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
16          "animate-in fade-in-0 zoom-in-95",
17          "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95",
18          local.class,
19        )}
20        {...rest}
21      />
22    </KobalteTooltip.Portal>
23  );
24};
25 
26export { Tooltip, TooltipTrigger, TooltipContent };