tooltip floating-ui/react

Author: DarianM

frontend/app/components/redesign/components/ToolsWalletAddress.tsx

@@ -159,9 +159,9 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
           <Tooltip>
             Your wallet is required in order for us to save this components
             configuration for you, link it to the original author, and verify
-            ownership for future updates. It also embeds the wallet address into
-            your web page automatically, enabling Web Monetization on your
-            behalf.
+            ownership for future updates.
+            <br /> It also embeds the wallet address into your web page
+            automatically, enabling Web Monetization on your behalf.
           </Tooltip>
         </div>
 

frontend/app/components/redesign/components/Tooltip.tsx

@@ -1,42 +1,76 @@
-import { useState, useId } from 'react'
-import { cx } from 'class-variance-authority'
+import { useState } from 'react'
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  autoUpdate,
+  size
+} from '@floating-ui/react-dom'
 import { SVGTooltip } from '../../../assets/svg'
 
 export interface TooltipProps {
   children: React.ReactNode
-  className?: string
 }
 
-export function Tooltip({ children, className }: TooltipProps) {
+export function Tooltip({ children }: TooltipProps) {
   const [open, setOpen] = useState(false)
-  const tooltipId = useId()
+
+  const { x, y, strategy, refs } = useFloating({
+    open,
+    placement: 'right',
+    middleware: [
+      offset(8),
+      flip({
+        fallbackPlacements: ['top', 'bottom'],
+        padding: 8
+      }),
+      shift({ padding: 8 }),
+      size({
+        apply({ availableWidth, elements }) {
+          const maxWidth = Math.min(availableWidth, 450)
+          Object.assign(elements.floating.style, {
+            maxWidth: `${maxWidth}px`,
+            width: 'auto'
+          })
+        },
+        padding: 8
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  })
 
   return (
-    <div className={cx('w-fit relative inline-flex', className)}>
+    <>
       <button
+        ref={refs.setReference}
         type="button"
         aria-label="More information"
-        aria-describedby={open ? tooltipId : undefined}
-        aria-expanded={open}
+        aria-describedby={open ? 'tooltip' : undefined}
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
         onFocus={() => setOpen(true)}
         onBlur={() => setOpen(false)}
-        onClick={() => setOpen(!open)}
         className="rounded-full hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-primary-focus"
       >
         <SVGTooltip className="w-6 h-6" />
       </button>
 
       {open && (
         <div
-          id={tooltipId}
+          ref={refs.setFloating}
+          id="tooltip"
           role="tooltip"
-          className="absolute z-50 left-8 top-1/2 -translate-y-1/2 w-[485px] flex items-center justify-center gap-2.5 p-4 bg-interface-tooltip rounded-lg shadow-lg"
+          style={{
+            position: strategy,
+            top: y,
+            left: x
+          }}
+          className="z-50 p-md bg-interface-tooltip rounded-lg shadow-lg text-white text-xs sm:text-sm"
         >
-          <p className="text-white text-sm leading-relaxed">{children}</p>
+          {children}
         </div>
       )}
-    </div>
+    </>
   )
 }

frontend/package.json

@@ -13,6 +13,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.6",
     "@interledger/open-payments": "^7.1.3",
     "@noble/ed25519": "^3.0.0",
     "@paralleldrive/cuid2": "^2.2.2",