add provider support for multiple tooltips

Author: gabrieljablonski

src/App.tsx

@@ -4,15 +4,25 @@ import { useEffect, useRef, useState } from 'react'
 import styles from './styles.module.css'
 
 function WithProvider() {
-  const { attach, detach } = useTooltip()
+  const tooltipper = useTooltip()
+  const { attach, detach } = tooltipper()
+  const { attach: attach1, detach: detach1 } = tooltipper('tooltip-1')
+  const { attach: attach2, detach: detach2 } = tooltipper('tooltip-2')
   const buttonRef1 = useRef<HTMLButtonElement>(null)
   const buttonRef2 = useRef<HTMLButtonElement>(null)
-  const [clickCount, setClickCount] = useState(0)
+  const buttonRef3 = useRef<HTMLButtonElement>(null)
+  const buttonRef4 = useRef<HTMLButtonElement>(null)
+  const buttonRef5 = useRef<HTMLButtonElement>(null)
+  const buttonRef6 = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
     attach(buttonRef1, buttonRef2)
+    attach1(buttonRef3, buttonRef4)
+    attach2(buttonRef5, buttonRef6)
     return () => {
       detach(buttonRef1, buttonRef2)
+      detach1(buttonRef3, buttonRef4)
+      detach2(buttonRef5, buttonRef6)
     }
   }, [])
 
@@ -22,20 +32,33 @@ function WithProvider() {
         <button
           ref={buttonRef1}
           data-tooltip-place="right"
-          data-tooltip-content={`Hello World from a Tooltip ${clickCount}`}
-          onClick={() => setClickCount((i) => i + 1)}
-        >
-          Hover or focus me 4
-        </button>
-        <button
-          ref={buttonRef2}
-          data-tooltip-place="bottom"
-          data-tooltip-content="Hello World from a Tooltip 5"
+          data-tooltip-content="Hello World from a Shared Global Tooltip"
         >
           Hover or focus me 5
         </button>
+        <button ref={buttonRef2} data-tooltip-content="Hello World from a Shared Global Tooltip">
+          Hover or focus me 6
+        </button>
+      </p>
+      <p>
+        <button ref={buttonRef3} data-tooltip-content="Hello World from Shared Tooltip 1">
+          Hover or focus me 7
+        </button>
+        <button ref={buttonRef4} data-tooltip-content="Hello World from Shared Tooltip 1">
+          Hover or focus me 8
+        </button>
+      </p>
+      <p>
+        <button ref={buttonRef5} data-tooltip-content="Hello World from Shared Tooltip 2">
+          Hover or focus me 9
+        </button>
+        <button ref={buttonRef6} data-tooltip-content="Hello World from Shared Tooltip 2">
+          Hover or focus me 10
+        </button>
       </p>
       <Tooltip />
+      <Tooltip id="tooltip-1" />
+      <Tooltip id="tooltip-2" />
     </section>
   )
 }

src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useId, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { TooltipContent } from 'components/TooltipContent'
@@ -9,7 +9,7 @@ import type { ITooltip } from './TooltipTypes'
 
 const Tooltip = ({
   // props
-  id = useId(),
+  id,
   className,
   classNameArrow,
   variant = 'dark',
@@ -36,7 +36,7 @@ const Tooltip = ({
   const [inlineStyles, setInlineStyles] = useState({})
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState<boolean>(false)
-  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()
+  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
 
   const handleShow = (value: boolean) => {

src/components/TooltipController/TooltipController.tsx

@@ -41,7 +41,7 @@ const TooltipController = ({
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
   const [isHtmlContent, setIsHtmlContent] = useState(Boolean(html))
-  const { anchorRefs, activeAnchor } = useTooltip()
+  const { anchorRefs, activeAnchor } = useTooltip()(id)
 
   const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
     const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {

src/components/TooltipProvider/TooltipProvider.tsx

@@ -1,50 +1,87 @@
-import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useState,
+} from 'react'
+
+type AnchorRef = React.RefObject<HTMLElement>
 
 interface TooltipContextData {
-  anchorRefs: Set<React.RefObject<HTMLElement>>
-  attach: (...ref: React.RefObject<HTMLElement>[]) => void
-  detach: (...ref: React.RefObject<HTMLElement>[]) => void
-  activeAnchor: React.RefObject<HTMLElement>
-  setActiveAnchor: React.Dispatch<React.SetStateAction<React.RefObject<HTMLElement>>>
+  // when using one tooltip
+  anchorRefs: Set<AnchorRef>
+  activeAnchor: AnchorRef
+  attach: (...refs: AnchorRef[]) => void
+  detach: (...refs: AnchorRef[]) => void
+  setActiveAnchor: (ref: AnchorRef) => void
 }
 
-const TooltipContext = createContext<TooltipContextData>({
+type TooltipContextDataBuilder = (tooltipId?: string) => TooltipContextData
+
+const TooltipContext = createContext<TooltipContextDataBuilder>(() => ({
   anchorRefs: new Set(),
+  activeAnchor: { current: null },
   attach: () => {
     /* attach anchor element */
   },
   detach: () => {
     /* detach anchor element */
   },
-  activeAnchor: { current: null },
   setActiveAnchor: () => {
     /* set active anchor */
   },
-})
+}))
 
 const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const [anchorRefs, setAnchorRefs] = useState<Set<React.RefObject<HTMLElement>>>(new Set())
-  const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
-
-  const attach = (...refs: React.RefObject<HTMLElement>[]) => {
-    setAnchorRefs((oldRefs) => {
-      refs.forEach((ref) => oldRefs.add(ref))
-      // create new set to trigger re-render
-      return new Set(oldRefs)
+  const defaultTooltipId = useId()
+  const [anchorRefMap, setAnchorRefMap] = useState<Record<string, Set<AnchorRef>>>({
+    [defaultTooltipId]: new Set(),
+  })
+  const [activeAnchorMap, setActiveAnchorMap] = useState<Record<string, AnchorRef>>({
+    [defaultTooltipId]: { current: null },
+  })
+
+  const attach = (tooltipId: string, ...refs: AnchorRef[]) => {
+    setAnchorRefMap((oldMap) => {
+      const tooltipRefs = oldMap[tooltipId] ?? new Set()
+      refs.forEach((ref) => tooltipRefs.add(ref))
+      // create new object to trigger re-render
+      return { ...oldMap, [tooltipId]: tooltipRefs }
+    })
+  }
+
+  const detach = (tooltipId: string, ...refs: AnchorRef[]) => {
+    setAnchorRefMap((oldMap) => {
+      const tooltipRefs = oldMap[tooltipId]
+      if (!tooltipRefs) {
+        // tooltip not found
+        // maybe thow error?
+        return oldMap
+      }
+      refs.forEach((ref) => tooltipRefs.delete(ref))
+      // create new object to trigger re-render
+      return { ...oldMap }
     })
   }
 
-  const detach = (...refs: React.RefObject<HTMLElement>[]) => {
-    setAnchorRefs((oldRefs) => {
-      refs.forEach((ref) => oldRefs.delete(ref))
-      // create new set to trigger re-render
-      return new Set(oldRefs)
+  const setActiveAnchor = (tooltipId: string, ref: React.RefObject<HTMLElement>) => {
+    setActiveAnchorMap((oldMap) => {
+      // create new object to trigger re-render
+      return { ...oldMap, [tooltipId]: ref }
     })
   }
 
-  const context = useMemo(
-    () => ({ anchorRefs, attach, detach, activeAnchor, setActiveAnchor }),
-    [anchorRefs, attach, detach, activeAnchor, setActiveAnchor],
+  const context = useCallback(
+    (tooltipId?: string) => ({
+      anchorRefs: anchorRefMap[tooltipId ?? defaultTooltipId] ?? new Set(),
+      activeAnchor: activeAnchorMap[tooltipId ?? defaultTooltipId] ?? { current: null },
+      attach: (...refs: AnchorRef[]) => attach(tooltipId ?? defaultTooltipId, ...refs),
+      detach: (...refs: AnchorRef[]) => detach(tooltipId ?? defaultTooltipId, ...refs),
+      setActiveAnchor: (ref: AnchorRef) => setActiveAnchor(tooltipId ?? defaultTooltipId, ref),
+    }),
+    [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach],
   )
 
   return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>