refactor: update tooltip position feature implementation

Author: danielbarion

src/components/Tooltip/Tooltip.tsx

@@ -24,7 +24,7 @@ const Tooltip = ({
   delayHide = 0,
   noArrow,
   style: externalStyles,
-  type = 'fixed',
+  position,
   // props handled by controller
   isHtmlContent = false,
   content,
@@ -101,21 +101,22 @@ const Tooltip = ({
     }
   }
 
-  const handleMouseMove = (event?: MouseEvent) => {
-    if (!event) {
+  const handleTooltipPosition = () => {
+    if (!position?.x || !position?.y) {
       return
     }
+
     const virtualElement = {
       getBoundingClientRect() {
         return {
-          x: event.clientX,
-          y: event.clientY,
+          x: position.x,
+          y: position.y,
           width: 0,
           height: 0,
-          top: event.clientY,
-          left: event.clientX,
-          right: event.clientX,
-          bottom: event.clientY,
+          top: position.y,
+          left: position.x,
+          right: position.x,
+          bottom: position.y,
         }
       },
     } as Element
@@ -138,11 +139,7 @@ const Tooltip = ({
     })
   }
 
-  const handleClickTooltipAnchor = (event: MouseEvent) => {
-    if (type === 'free') {
-      handleMouseMove(event)
-    }
-
+  const handleClickTooltipAnchor = () => {
     if (setIsOpen) {
       setIsOpen(!isOpen)
     } else if (!setIsOpen && isOpen === undefined) {
@@ -184,13 +181,6 @@ const Tooltip = ({
         { 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 }) => {
@@ -209,7 +199,8 @@ const Tooltip = ({
   }, [anchorRefs, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
-    if (type === 'free') {
+    if (position?.x && position?.y) {
+      handleTooltipPosition()
       return () => null
     }
 
@@ -243,7 +234,7 @@ const Tooltip = ({
     return () => {
       mounted = false
     }
-  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy, type])
+  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy, position])
 
   useEffect(() => {
     return () => {

src/components/Tooltip/TooltipTypes.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode, Element, CSSProperties } from 'react'
+import type { ElementType, ReactNode, CSSProperties } from 'react'
 
 export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
 
@@ -26,6 +26,11 @@ export type DataAttribute =
   | 'delay-show'
   | 'delay-hide'
 
+export interface IPosition {
+  x?: number
+  y?: number
+}
+
 export interface ITooltip {
   className?: string
   classNameArrow?: string
@@ -41,11 +46,11 @@ export interface ITooltip {
   children?: ChildrenType
   events?: EventsType[]
   positionStrategy?: PositionStrategy
-  type?: Type
   delayShow?: number
   delayHide?: number
   noArrow?: boolean
   style?: CSSProperties
+  position?: IPosition
   isOpen?: boolean
   setIsOpen?: (value: boolean) => void
 }

src/components/TooltipController/TooltipController.tsx

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

src/components/TooltipController/TooltipControllerTypes.d.ts

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

src/index.tsx

@@ -7,6 +7,7 @@ import type {
   PositionStrategy,
   VariantType,
   WrapperType,
+  IPosition,
 } from './components/Tooltip/TooltipTypes'
 import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes'
 import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes'
@@ -23,4 +24,5 @@ export type {
   WrapperType,
   ITooltipController as ITooltip,
   ITooltipWrapper,
+  IPosition,
 }