feat(TitleTooltip): Stick tooltip to cursor if no side is defined

Author: PrettyCoffee

bun.lock

@@ -21,6 +21,7 @@
     "analyze": "bunx vite-bundle-analyzer"
   },
   "dependencies": {
+    "@floating-ui/react": "0.27.18",
     "@lingui/core": "5.9.1",
     "@lingui/react": "5.9.1",
     "@radix-ui/react-checkbox": "1.3.3",

package.json

@@ -5,17 +5,17 @@ import { useHashLocation } from "wouter/use-hash-location"
 
 import { DialogProvider } from "components/ui/dialog"
 import { Toaster } from "components/ui/toaster"
-import { Tooltip } from "components/ui/tooltip"
+import { TooltipProvider } from "components/ui/tooltip"
 import { LocaleProvider } from "locales/locale-provider"
 
 export const AppProviders = ({ children }: PropsWithChildren) => (
   <LocaleProvider>
     <Router hook={useHashLocation}>
-      <Tooltip.Provider>
+      <TooltipProvider>
         <Toaster />
         <DialogProvider />
         {children}
-      </Tooltip.Provider>
+      </TooltipProvider>
     </Router>
   </LocaleProvider>
 )

src/app/providers.tsx

@@ -115,11 +115,7 @@ const DayColumn = ({
               {category?.fullName || t`No category`}
             </span>
           ) : (
-            <TitleTooltip
-              asChild
-              title={category?.fullName || t`No category`}
-              side="top"
-            >
+            <TitleTooltip title={category?.fullName || t`No category`}>
               <span className="absolute inset-0" />
             </TitleTooltip>
           )}

src/app/routes/calendar/calendar-route.tsx

@@ -55,7 +55,7 @@ export const FileInput = ({
   }
 
   return (
-    <TitleTooltip title={alert?.text} side="bottom" asChild>
+    <TitleTooltip title={alert?.text}>
       <div
         className="inline-block"
         onDrop={handleDrop}

src/components/ui/file-input/file-input.tsx

@@ -47,7 +47,7 @@ export const IconButton = ({
   iconSize = "sm",
   ...delegated
 }: IconButtonProps) => (
-  <TitleTooltip title={hideTitle ? undefined : title} side={titleSide} asChild>
+  <TitleTooltip title={hideTitle ? undefined : title} side={titleSide}>
     <Button
       ref={ref}
       look={look}

src/components/ui/icon-button/icon-button.tsx

@@ -0,0 +1,78 @@
+import { PropsWithChildren, useState } from "react"
+
+import {
+  FloatingPortal,
+  offset,
+  shift,
+  useClientPoint,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+  useTransitionStyles,
+} from "@floating-ui/react"
+
+import { Slot } from "components/utility/slot"
+import { ClassNameProp, TitleProp } from "types/base-props"
+import { cn } from "utils/cn"
+import { zIndex } from "utils/z-index"
+
+import { tooltipStyles } from "./tooltip-styles"
+
+interface CursorTooltipProps extends Required<TitleProp>, ClassNameProp {}
+
+export const CursorTooltip = ({
+  title,
+  children,
+  className,
+}: PropsWithChildren<CursorTooltipProps>) => {
+  const [open, setOpen] = useState(false)
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset({ mainAxis: 16, crossAxis: 8 }), shift({ padding: 8 })],
+    placement: "bottom-start",
+  })
+
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: { opacity: 0, zoom: 0.75 },
+    open: { opacity: 1, zoom: 1 },
+    close: { opacity: 0, zoom: 0.75 },
+    duration: 150,
+  })
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClientPoint(context),
+    useHover(context),
+    useFocus(context),
+    useDismiss(context),
+    useRole(context, { role: "tooltip" }),
+  ])
+
+  return (
+    <>
+      <Slot ref={refs.setReference} {...getReferenceProps()}>
+        {children}
+      </Slot>
+
+      {isMounted && (
+        <FloatingPortal>
+          <div
+            // eslint-disable-next-line react-hooks/refs -- false positive
+            ref={refs.setFloating}
+            style={floatingStyles}
+            className={zIndex.tooltip}
+            {...getFloatingProps()}
+          >
+            <div style={styles} className={cn(tooltipStyles, className)}>
+              {title}
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  )
+}

src/components/ui/tooltip/cursor-tooltip.tsx

@@ -2,32 +2,28 @@ import { PropsWithChildren } from "react"
 
 import { TooltipContentProps } from "@radix-ui/react-tooltip"
 
-import { AsChildProp, ClassNameProp, TitleProp } from "types/base-props"
+import { ClassNameProp, TitleProp } from "types/base-props"
 
+import { CursorTooltip } from "./cursor-tooltip"
 import { Tooltip } from "./tooltip"
 
-export interface TitleTooltipProps
-  extends TitleProp, AsChildProp, ClassNameProp {
+export interface TitleTooltipProps extends TitleProp, ClassNameProp {
   side?: TooltipContentProps["side"]
-  force?: boolean
 }
 export const TitleTooltip = ({
   title,
-  asChild,
   side,
   children,
-  force,
   className,
 }: PropsWithChildren<TitleTooltipProps>) =>
   !title ? (
     children
+  ) : !side ? (
+    <CursorTooltip className={className} title={title}>
+      {children}
+    </CursorTooltip>
   ) : (
-    <Tooltip.Root open={force}>
-      <Tooltip.Trigger asChild={asChild} className={className}>
-        {children}
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side={side}>{title}</Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip className={className} content={title} side={side}>
+      {children}
+    </Tooltip>
   )

src/components/ui/tooltip/title-tooltip.tsx

@@ -0,0 +1,9 @@
+import { cn } from "utils/cn"
+import { surface } from "utils/styles"
+import { zIndex } from "utils/z-index"
+
+export const tooltipStyles = cn(
+  surface({ look: "overlay", size: "md" }),
+  "pointer-events-none overflow-hidden px-3 py-1.5 text-sm",
+  zIndex.tooltip
+)

src/components/ui/tooltip/tooltip-styles.ts

@@ -1,37 +1,44 @@
-import { ComponentProps } from "react"
+import { PropsWithChildren, ReactNode } from "react"
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
+import { ClassNameProp } from "types/base-props"
 import { cn } from "utils/cn"
-import { surface } from "utils/styles"
-import { zIndex } from "utils/z-index"
 
-const Content = ({
-  ref,
-  className,
-  sideOffset = 4,
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Content>) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      surface({ look: "overlay", size: "md" }),
-      "animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "overflow-hidden px-3 py-1.5 text-sm",
-      zIndex.tooltip,
-      className
-    )}
-    {...props}
-  />
-)
+import { tooltipStyles } from "./tooltip-styles"
 
-const { Root, Trigger, Portal, Provider } = TooltipPrimitive
+export const TooltipProvider = TooltipPrimitive.Provider
 
-export const Tooltip = {
-  Root,
-  Trigger,
-  Content,
-  Portal,
-  Provider,
+interface TooltipProps extends ClassNameProp {
+  content: ReactNode
+  side?: TooltipPrimitive.TooltipContentProps["side"]
+  align?: TooltipPrimitive.TooltipContentProps["align"]
 }
+export const Tooltip = ({
+  content,
+  side,
+  align,
+  children,
+  className,
+}: PropsWithChildren<TooltipProps>) => (
+  <TooltipPrimitive.Root>
+    <TooltipPrimitive.Trigger asChild className={className}>
+      {children}
+    </TooltipPrimitive.Trigger>
+
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        side={side}
+        align={align}
+        sideOffset={4}
+        className={cn(
+          tooltipStyles,
+          "animate-in fade-in-0 zoom-in-75 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75",
+          className
+        )}
+      >
+        {content}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  </TooltipPrimitive.Root>
+)