feat[wip]: add type of tooltip as prop

Author: danielbarion

src/App.tsx

@@ -112,6 +112,13 @@ function App() {
       <TooltipProvider>
         <WithProviderMultiple />
       </TooltipProvider>
+      <div id="freeTooltipAnchor" className={styles.freeAnchor} />
+      <Tooltip
+        anchorId="freeTooltipAnchor"
+        content="This is a free tooltip"
+        type="free"
+        events={['click']}
+      />
     </main>
   )
 }

src/components/Tooltip/Tooltip.tsx

@@ -24,6 +24,7 @@ const Tooltip = ({
   delayHide = 0,
   noArrow,
   style: externalStyles,
+  type = 'fixed',
   // props handled by controller
   isHtmlContent = false,
   content,
@@ -100,14 +101,6 @@ const Tooltip = ({
     }
   }
 
-  const handleClickTooltipAnchor = () => {
-    if (setIsOpen) {
-      setIsOpen(!isOpen)
-    } else if (isOpen === undefined) {
-      setShow((currentValue) => !currentValue)
-    }
-  }
-
   const handleMouseMove = (event?: MouseEvent) => {
     if (!event) {
       return
@@ -126,6 +119,7 @@ const Tooltip = ({
         }
       },
     } as Element
+
     computeTooltipPosition({
       place,
       offset,
@@ -144,6 +138,18 @@ const Tooltip = ({
     })
   }
 
+  const handleClickTooltipAnchor = (event: MouseEvent) => {
+    if (type === 'free') {
+      handleMouseMove(event)
+    }
+
+    if (setIsOpen) {
+      setIsOpen(!isOpen)
+    } else if (!setIsOpen && isOpen === undefined) {
+      setShow((currentValue) => !currentValue)
+    }
+  }
+
   // debounce handler to prevent call twice when
   // mouse enter and focus events being triggered toggether
   const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
@@ -175,10 +181,16 @@ const Tooltip = ({
       enabledEvents.push(
         { event: 'mouseenter', listener: debouncedHandleShowTooltip },
         { event: 'mouseleave', listener: debouncedHandleHideTooltip },
-        { event: 'mousemove', listener: (e) => handleMouseMove(e as MouseEvent) },
         { event: 'focus', listener: debouncedHandleShowTooltip },
         { event: 'blur', listener: debouncedHandleHideTooltip },
       )
+
+      if (type === 'float') {
+        enabledEvents.push({
+          event: 'mousemove',
+          listener: (event) => handleMouseMove(event as MouseEvent),
+        })
+      }
     }
 
     enabledEvents.forEach(({ event, listener }) => {
@@ -197,6 +209,10 @@ const Tooltip = ({
   }, [anchorRefs, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
+    if (type === 'free') {
+      return () => null
+    }
+
     let elementReference = activeAnchor.current
     if (anchorId) {
       // `anchorId` element takes precedence
@@ -227,7 +243,7 @@ const Tooltip = ({
     return () => {
       mounted = false
     }
-  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy])
+  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy, type])
 
   useEffect(() => {
     return () => {

src/components/Tooltip/TooltipTypes.d.ts

@@ -12,6 +12,8 @@ export type EventsType = 'hover' | 'click'
 
 export type PositionStrategy = 'absolute' | 'fixed'
 
+export type Type = 'fixed' | 'float' | 'free'
+
 export type DataAttribute =
   | 'place'
   | 'content'
@@ -39,6 +41,7 @@ export interface ITooltip {
   children?: ChildrenType
   events?: EventsType[]
   positionStrategy?: PositionStrategy
+  type?: Type
   delayShow?: number
   delayHide?: number
   noArrow?: boolean

src/components/TooltipController/TooltipController.tsx

@@ -30,6 +30,7 @@ const TooltipController = ({
   delayHide = 0,
   noArrow,
   style,
+  type,
   isOpen,
   setIsOpen,
 }: ITooltipController) => {
@@ -179,6 +180,7 @@ const TooltipController = ({
     delayHide: tooltipDelayHide,
     noArrow,
     style,
+    type,
     isOpen,
     setIsOpen,
   }

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -7,6 +7,7 @@ import type {
   ChildrenType,
   EventsType,
   PositionStrategy,
+  Type,
 } from 'components/Tooltip/TooltipTypes'
 
 export interface ITooltipController {
@@ -27,6 +28,7 @@ export interface ITooltipController {
   delayHide?: number
   noArrow?: boolean
   style?: CSSProperties
+  type?: Type
   isOpen?: boolean
   setIsOpen?: (value: boolean) => void
 }

src/styles.module.css

@@ -3,3 +3,9 @@
   width: 100%;
   height: 100vh;
 }
+
+.freeAnchor {
+  width: 500px;
+  height: 500px;
+  background-color: #d3d3d3;
+}