Tipover

1"use client";
2 
3import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9import { usePointerCapability } from "@/hooks/use-pointer-capability";
10 
11type TipoverContextValue = {
12  isTouchDevice: boolean;
13};
14 
15const TipoverContext = React.createContext<TipoverContextValue | null>(null);
16 
17function Tipover({ ...props }: PopoverPrimitive.Root.Props & TooltipPrimitive.Root.Props) {
18  const { isTouchDevice } = usePointerCapability();
19  const contextValue = React.useMemo(() => ({ isTouchDevice }), [isTouchDevice]);
20 
21  return (
22    <TipoverContext.Provider value={contextValue}>
23      {isTouchDevice ? (
24        <PopoverPrimitive.Root data-slot="tipover" {...props} />
25      ) : (
26        <TooltipPrimitive.Provider delay={0}>
27          <TooltipPrimitive.Root data-slot="tipover" {...props} />
28        </TooltipPrimitive.Provider>
29      )}
30    </TipoverContext.Provider>
31  );
32}
33 
34function TipoverTrigger({
35  nativeButton,
36  closeDelay,
37  ...props
38}: Omit<TooltipPrimitive.Trigger.Props & PopoverPrimitive.Trigger.Props, "handle"> &
39  Pick<PopoverPrimitive.Trigger.Props, "nativeButton">) {
40  const ctx = useTipoverContext("TipoverTrigger");
41  const { Trigger } = ctx.isTouchDevice ? PopoverPrimitive : TooltipPrimitive;
42  const triggerProps = ctx.isTouchDevice
43    ? ({
44        nativeButton,
45        openOnHover: true,
46      } satisfies PopoverPrimitive.Trigger.Props)
47    : ({
48        closeDelay: closeDelay ?? 150,
49      } satisfies TooltipPrimitive.Trigger.Props);
50 
51  return <Trigger data-slot="tipover-trigger" {...props} {...triggerProps} />;
52}
53 
54function TipoverContent({
55  className,
56  side = "top",
57  sideOffset = 4,
58  align = "center",
59  alignOffset = 0,
60  children,
61  ...props
62}: TooltipPrimitive.Popup.Props &
63  PopoverPrimitive.Popup.Props &
64  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
65  const ctx = useTipoverContext("TipoverContent");
66  const { Portal, Positioner, Popup, Arrow } = ctx.isTouchDevice
67    ? PopoverPrimitive
68    : TooltipPrimitive;
69 
70  return (
71    <Portal>
72      <Positioner
73        align={align}
74        alignOffset={alignOffset}
75        side={side}
76        sideOffset={sideOffset}
77        className="pointer-events-auto isolate z-50"
78      >
79        <Popup
80          data-slot="tipover-content"
81          className={cn(
82// … truncated