react-tooltip 5.1.1 → 5.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "react tooltip component",
   "scripts": {
     "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",

package/src/App.tsx

@@ -0,0 +1,119 @@
+import { TooltipController as Tooltip } from 'components/TooltipController'
+import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider'
+import { useState } from 'react'
+import styles from './styles.module.css'
+
+function WithProviderMinimal() {
+  return (
+    <section style={{ marginTop: '100px' }}>
+      <p>
+        <TooltipWrapper place="bottom" content="Shared Global Tooltip">
+          <button>Minimal 1</button>
+        </TooltipWrapper>
+        <TooltipWrapper place="right" content="Shared Global Tooltip">
+          <button>Minimal 2</button>
+        </TooltipWrapper>
+      </p>
+      <Tooltip />
+    </section>
+  )
+}
+
+function WithProviderMultiple() {
+  return (
+    <section style={{ marginTop: '100px' }}>
+      <p>
+        <TooltipWrapper tooltipId="tooltip-1" place="bottom">
+          <button>Multiple 1</button>
+        </TooltipWrapper>
+        <TooltipWrapper tooltipId="tooltip-2" place="right">
+          <button>Multiple 2</button>
+        </TooltipWrapper>
+      </p>
+      <Tooltip id="tooltip-1" content="Tooltip 1" />
+      <Tooltip id="tooltip-2" content="Tooltip 2" />
+    </section>
+  )
+}
+
+function App() {
+  const [anchorId, setAnchorId] = useState('button')
+  const [isDarkOpen, setIsDarkOpen] = useState(false)
+
+  return (
+    <main className={styles['main']}>
+      <button
+        id="button"
+        aria-describedby="tooltip"
+        data-tooltip-content="My big tooltip content 1"
+        onClick={() => {
+          setAnchorId('button')
+        }}
+      >
+        My button
+      </button>
+      <Tooltip
+        place="bottom"
+        anchorId={anchorId}
+        // only shown if `data-tooltip-content` is unset
+        content={`Showing tooltip on ${anchorId}`}
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+      />
+      <Tooltip
+        place="top"
+        variant="success"
+        anchorId="button2"
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+      />
+      <Tooltip
+        place="top"
+        variant="info"
+        anchorId="button3"
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+      />
+      <Tooltip
+        place="right"
+        variant="info"
+        anchorId="button3"
+        content="My big tooltip content"
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+        style={{ backgroundColor: '#ff00ff' }}
+      />
+
+      <section style={{ marginTop: '100px' }}>
+        <p>
+          <button
+            id="button2"
+            data-tooltip-content="Hello World from a Tooltip 2"
+            onClick={() => {
+              setAnchorId('button2')
+            }}
+          >
+            Hover or focus me
+          </button>
+          <button
+            id="button3"
+            data-tooltip-content="Hello World from a Tooltip 3"
+            onClick={() => {
+              setAnchorId('button3')
+            }}
+          >
+            Hover or focus me 2
+          </button>
+        </p>
+      </section>
+      <TooltipProvider>
+        <WithProviderMinimal />
+      </TooltipProvider>
+      <TooltipProvider>
+        <WithProviderMultiple />
+      </TooltipProvider>
+    </main>
+  )
+}
+
+export default App

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useState, useRef } from 'react'
+import classNames from 'classnames'
+import debounce from 'utils/debounce'
+import { TooltipContent } from 'components/TooltipContent'
+import { useTooltip } from 'components/TooltipProvider'
+import { computeTooltipPosition } from '../../utils/compute-positions'
+import styles from './styles.module.css'
+import type { ITooltip } from './TooltipTypes'
+
+const Tooltip = ({
+  // props
+  id,
+  className,
+  classNameArrow,
+  variant = 'dark',
+  anchorId,
+  place = 'top',
+  offset = 10,
+  events = ['hover'],
+  positionStrategy = 'absolute',
+  wrapper: WrapperElement = 'div',
+  children = null,
+  delayShow = 0,
+  delayHide = 0,
+  style: externalStyles,
+  // props handled by controller
+  isHtmlContent = false,
+  content,
+  isOpen,
+  setIsOpen,
+}: ITooltip) => {
+  const tooltipRef = useRef<HTMLElement>(null)
+  const tooltipArrowRef = useRef<HTMLDivElement>(null)
+  const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [inlineStyles, setInlineStyles] = useState({})
+  const [inlineArrowStyles, setInlineArrowStyles] = useState({})
+  const [show, setShow] = useState<boolean>(false)
+  const [calculatingPosition, setCalculatingPosition] = useState(false)
+  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
+  const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
+
+  const handleShow = (value: boolean) => {
+    if (setIsOpen) {
+      setIsOpen(value)
+    } else if (isOpen === undefined) {
+      setShow(value)
+    }
+  }
+
+  const handleShowTooltipDelayed = () => {
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current)
+    }
+
+    tooltipShowDelayTimerRef.current = setTimeout(() => {
+      handleShow(true)
+    }, delayShow)
+  }
+
+  const handleHideTooltipDelayed = () => {
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current)
+    }
+
+    tooltipHideDelayTimerRef.current = setTimeout(() => {
+      handleShow(false)
+    }, delayHide)
+  }
+
+  const handleShowTooltip = (event?: Event) => {
+    if (!event) {
+      return
+    }
+    if (delayShow) {
+      handleShowTooltipDelayed()
+    } else {
+      handleShow(true)
+    }
+    setActiveAnchor((anchor) =>
+      anchor.current === event.target ? anchor : { current: event.target as HTMLElement },
+    )
+    setProviderActiveAnchor({ current: event.target as HTMLElement })
+
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current)
+    }
+  }
+
+  const handleHideTooltip = () => {
+    if (delayHide) {
+      handleHideTooltipDelayed()
+    } else {
+      handleShow(false)
+    }
+
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current)
+    }
+  }
+
+  const handleClickTooltipAnchor = () => {
+    if (setIsOpen) {
+      setIsOpen(!isOpen)
+    } else if (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)
+  const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50)
+
+  useEffect(() => {
+    const elementRefs = new Set(anchorRefs)
+
+    const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    if (anchorById) {
+      setActiveAnchor((anchor) =>
+        anchor.current === anchorById ? anchor : { current: anchorById },
+      )
+      elementRefs.add({ current: anchorById })
+    }
+
+    if (!elementRefs.size) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {}
+    }
+
+    const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
+
+    if (events.find((event: string) => event === 'click')) {
+      enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor })
+    }
+
+    if (events.find((event: string) => event === 'hover')) {
+      enabledEvents.push(
+        { event: 'mouseenter', listener: debouncedHandleShowTooltip },
+        { event: 'mouseleave', listener: debouncedHandleHideTooltip },
+        { event: 'focus', listener: debouncedHandleShowTooltip },
+        { event: 'blur', listener: debouncedHandleHideTooltip },
+      )
+    }
+
+    enabledEvents.forEach(({ event, listener }) => {
+      elementRefs.forEach((ref) => {
+        ref.current?.addEventListener(event, listener)
+      })
+    })
+
+    return () => {
+      enabledEvents.forEach(({ event, listener }) => {
+        elementRefs.forEach((ref) => {
+          ref.current?.removeEventListener(event, listener)
+        })
+      })
+    }
+  }, [anchorRefs, anchorId, events, delayHide, delayShow])
+
+  useEffect(() => {
+    let elementReference = activeAnchor.current
+    if (anchorId) {
+      // `anchorId` element takes precedence
+      elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    }
+    setCalculatingPosition(true)
+    let mounted = true
+    computeTooltipPosition({
+      place,
+      offset,
+      elementReference,
+      tooltipReference: tooltipRef.current,
+      tooltipArrowReference: tooltipArrowRef.current,
+      strategy: positionStrategy,
+    }).then((computedStylesData) => {
+      if (!mounted) {
+        // invalidate computed positions after remount
+        return
+      }
+      setCalculatingPosition(false)
+      if (Object.keys(computedStylesData.tooltipStyles).length) {
+        setInlineStyles(computedStylesData.tooltipStyles)
+      }
+      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+        setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
+      }
+    })
+    return () => {
+      mounted = false
+    }
+  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy])
+
+  useEffect(() => {
+    return () => {
+      if (tooltipShowDelayTimerRef.current) {
+        clearTimeout(tooltipShowDelayTimerRef.current)
+      }
+      if (tooltipHideDelayTimerRef.current) {
+        clearTimeout(tooltipHideDelayTimerRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <WrapperElement
+      id={id}
+      role="tooltip"
+      className={classNames(styles['tooltip'], styles[variant], className, {
+        [styles['show']]: !calculatingPosition && (isOpen || show),
+        [styles['fixed']]: positionStrategy === 'fixed',
+      })}
+      style={{ ...externalStyles, ...inlineStyles }}
+      ref={tooltipRef}
+    >
+      {children || (isHtmlContent ? <TooltipContent content={content as string} /> : content)}
+      <div
+        className={classNames(styles['arrow'], classNameArrow)}
+        style={inlineArrowStyles}
+        ref={tooltipArrowRef}
+      />
+    </WrapperElement>
+  )
+}
+
+export default Tooltip

package/src/components/Tooltip/TooltipTypes.d.ts

@@ -0,0 +1,47 @@
+import type { ElementType, ReactNode, Element, CSSProperties } from 'react'
+
+export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
+
+export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
+
+export type WrapperType = ElementType | 'div' | 'span'
+
+export type ChildrenType = Element | ElementType | ReactNode
+
+export type EventsType = 'hover' | 'click'
+
+export type PositionStrategy = 'absolute' | 'fixed'
+
+export type DataAttribute =
+  | 'place'
+  | 'content'
+  | 'html'
+  | 'variant'
+  | 'offset'
+  | 'wrapper'
+  | 'events'
+  | 'position-strategy'
+  | 'delay-show'
+  | 'delay-hide'
+
+export interface ITooltip {
+  className?: string
+  classNameArrow?: string
+  content?: string
+  html?: string
+  place?: PlacesType
+  offset?: number
+  id?: string
+  variant?: VariantType
+  anchorId?: string
+  isHtmlContent?: boolean
+  wrapper?: WrapperType
+  children?: ChildrenType
+  events?: EventsType[]
+  positionStrategy?: PositionStrategy
+  delayShow?: number
+  delayHide?: number
+  style?: CSSProperties
+  isOpen?: boolean
+  setIsOpen?: (value: boolean) => void
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip'

package/src/components/Tooltip/styles.module.css

@@ -0,0 +1,62 @@
+.tooltip {
+  visibility: hidden;
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 8px 16px;
+  border-radius: 3px;
+  font-size: 90%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  will-change: opacity, visibility;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.arrow {
+  position: absolute;
+  background: inherit;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.show {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+/** Types variant **/
+.dark {
+  background: var(--rt-color-dark);
+  color: var(--rt-color-white);
+}
+
+.light {
+  background-color: var(--rt-color-white);
+  color: var(--rt-color-dark);
+}
+
+.success {
+  background-color: var(--rt-color-success);
+  color: var(--rt-color-white);
+}
+
+.warning {
+  background-color: var(--rt-color-warning);
+  color: var(--rt-color-white);
+}
+
+.error {
+  background-color: var(--rt-color-error);
+  color: var(--rt-color-white);
+}
+
+.info {
+  background-color: var(--rt-color-info);
+  color: var(--rt-color-white);
+}

package/src/components/TooltipContent/TooltipContent.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable react/no-danger */
+import type { ITooltipContent } from './TooltipContentTypes'
+
+const TooltipContent = ({ content }: ITooltipContent) => {
+  return <span dangerouslySetInnerHTML={{ __html: content }} />
+}
+
+export default TooltipContent

package/src/components/TooltipContent/TooltipContentTypes.d.ts

@@ -0,0 +1,3 @@
+export interface ITooltipContent {
+  content: string
+}

package/src/components/TooltipContent/index.ts

@@ -0,0 +1 @@
+export { default as TooltipContent } from './TooltipContent'

package/src/components/TooltipController/TooltipController.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react'
+import { Tooltip } from 'components/Tooltip'
+import type {
+  EventsType,
+  PositionStrategy,
+  PlacesType,
+  VariantType,
+  WrapperType,
+  DataAttribute,
+  ITooltip,
+} from 'components/Tooltip/TooltipTypes'
+import { useTooltip } from 'components/TooltipProvider'
+import type { ITooltipController } from './TooltipControllerTypes'
+
+const TooltipController = ({
+  id,
+  anchorId,
+  content,
+  html,
+  className,
+  classNameArrow,
+  variant = 'dark',
+  place = 'top',
+  offset = 10,
+  wrapper = 'div',
+  children = null,
+  events = ['hover'],
+  positionStrategy = 'absolute',
+  delayShow = 0,
+  delayHide = 0,
+  style,
+  isOpen,
+  setIsOpen,
+}: ITooltipController) => {
+  const [tooltipContent, setTooltipContent] = useState(content || html)
+  const [tooltipPlace, setTooltipPlace] = useState(place)
+  const [tooltipVariant, setTooltipVariant] = useState(variant)
+  const [tooltipOffset, setTooltipOffset] = useState(offset)
+  const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
+  const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
+  const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
+  const [tooltipEvents, setTooltipEvents] = useState(events)
+  const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
+  const [isHtmlContent, setIsHtmlContent] = useState(Boolean(html))
+  const { anchorRefs, activeAnchor } = useTooltip()(id)
+
+  const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
+    const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {
+      if (name.startsWith('data-tooltip-')) {
+        const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute
+        acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null
+      }
+      return acc
+    }, {} as Record<DataAttribute, string | null>)
+
+    return dataAttributes
+  }
+
+  const applyAllDataAttributesFromAnchorElement = (
+    dataAttributes: Record<string, string | null>,
+  ) => {
+    const handleDataAttributes: Record<DataAttribute, (value: string | null) => void> = {
+      place: (value) => {
+        setTooltipPlace((value as PlacesType) ?? place)
+      },
+      content: (value) => {
+        setIsHtmlContent(false)
+        setTooltipContent(value ?? content)
+      },
+      html: (value) => {
+        setIsHtmlContent(!!value)
+        setTooltipContent(value ?? html ?? content)
+      },
+      variant: (value) => {
+        setTooltipVariant((value as VariantType) ?? variant)
+      },
+      offset: (value) => {
+        setTooltipOffset(value === null ? offset : Number(value))
+      },
+      wrapper: (value) => {
+        setTooltipWrapper((value as WrapperType) ?? 'div')
+      },
+      events: (value) => {
+        const parsed = value?.split(' ') as EventsType[]
+        setTooltipEvents(parsed ?? events)
+      },
+      'position-strategy': (value) => {
+        setTooltipPositionStrategy((value as PositionStrategy) ?? positionStrategy)
+      },
+      'delay-show': (value) => {
+        setTooltipDelayShow(value === null ? delayShow : Number(value))
+      },
+      'delay-hide': (value) => {
+        setTooltipDelayHide(value === null ? delayHide : Number(value))
+      },
+    }
+    // reset unset data attributes to default values
+    // without this, data attributes from the last active anchor will still be used
+    Object.values(handleDataAttributes).forEach((handler) => handler(null))
+    Object.entries(dataAttributes).forEach(([key, value]) => {
+      handleDataAttributes[key as DataAttribute]?.(value)
+    })
+  }
+
+  useEffect(() => {
+    if (content) {
+      setTooltipContent(content)
+    }
+    if (html) {
+      setTooltipContent(html)
+    }
+  }, [content, html])
+
+  useEffect(() => {
+    const elementRefs = new Set(anchorRefs)
+
+    const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    if (anchorById) {
+      elementRefs.add({ current: anchorById })
+    }
+
+    if (!elementRefs.size) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {}
+    }
+
+    const observerCallback: MutationCallback = (mutationList) => {
+      mutationList.forEach((mutation) => {
+        if (
+          !activeAnchor.current ||
+          mutation.type !== 'attributes' ||
+          !mutation.attributeName?.startsWith('data-tooltip-')
+        ) {
+          return
+        }
+        // make sure to get all set attributes, since all unset attributes are reset
+        const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor.current)
+        applyAllDataAttributesFromAnchorElement(dataAttributes)
+      })
+    }
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(observerCallback)
+
+    // do not check for subtree and childrens, we only want to know attribute changes
+    // to stay watching `data-attributes-*` from anchor element
+    const observerConfig = { attributes: true, childList: false, subtree: false }
+
+    const element = activeAnchor.current ?? anchorById
+
+    if (element) {
+      const dataAttributes = getDataAttributesFromAnchorElement(element)
+      applyAllDataAttributesFromAnchorElement(dataAttributes)
+      // Start observing the target node for configured mutations
+      observer.observe(element, observerConfig)
+    }
+
+    return () => {
+      // Remove the observer when the tooltip is destroyed
+      observer.disconnect()
+    }
+  }, [anchorRefs, activeAnchor, anchorId])
+
+  const props: ITooltip = {
+    id,
+    anchorId,
+    className,
+    classNameArrow,
+    content: tooltipContent,
+    isHtmlContent,
+    place: tooltipPlace,
+    variant: tooltipVariant,
+    offset: tooltipOffset,
+    wrapper: tooltipWrapper,
+    events: tooltipEvents,
+    positionStrategy: tooltipPositionStrategy,
+    delayShow: tooltipDelayShow,
+    delayHide: tooltipDelayHide,
+    style,
+    isOpen,
+    setIsOpen,
+  }
+
+  return children ? <Tooltip {...props}>{children}</Tooltip> : <Tooltip {...props} />
+}
+
+export default TooltipController

package/src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'react'
+
+import type {
+  PlacesType,
+  VariantType,
+  WrapperType,
+  ChildrenType,
+  EventsType,
+  PositionStrategy,
+} from 'components/Tooltip/TooltipTypes'
+
+export interface ITooltipController {
+  className?: string
+  classNameArrow?: string
+  content?: string
+  html?: string
+  place?: PlacesType
+  offset?: number
+  id?: string
+  variant?: VariantType
+  anchorId?: string
+  wrapper?: WrapperType
+  children?: ChildrenType
+  events?: EventsType[]
+  positionStrategy?: PositionStrategy
+  delayShow?: number
+  delayHide?: number
+  style?: CSSProperties
+  isOpen?: boolean
+  setIsOpen?: (value: boolean) => void
+}
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    'data-tooltip-place'?: PlacesType
+    'data-tooltip-content'?: string
+    'data-tooltip-html'?: string
+    'data-tooltip-variant'?: VariantType
+    'data-tooltip-offset'?: number
+    'data-tooltip-wrapper'?: WrapperType
+    'data-tooltip-events'?: EventsType[]
+    'data-tooltip-position-strategy'?: PositionStrategy
+    'data-tooltip-delay-show'?: number
+    'data-tooltip-delay-hide'?: number
+  }
+}

package/src/components/TooltipController/index.ts

@@ -0,0 +1 @@
+export { default as TooltipController } from './TooltipController'

package/src/components/TooltipProvider/TooltipProvider.tsx

@@ -0,0 +1,110 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
+
+import type {
+  AnchorRef,
+  TooltipContextData,
+  TooltipContextDataWrapper,
+} from './TooltipProviderTypes'
+
+const defaultContextData: TooltipContextData = {
+  anchorRefs: new Set(),
+  activeAnchor: { current: null },
+  attach: () => {
+    /* attach anchor element */
+  },
+  detach: () => {
+    /* detach anchor element */
+  },
+  setActiveAnchor: () => {
+    /* set active anchor */
+  },
+}
+
+const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData)
+const TooltipContext = createContext<TooltipContextDataWrapper>(defaultContextWrapper)
+
+const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  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]: new Set(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 setActiveAnchor = (tooltipId: string, ref: React.RefObject<HTMLElement>) => {
+    setActiveAnchorMap((oldMap) => {
+      if (oldMap[tooltipId]?.current === ref.current) {
+        return oldMap
+      }
+      // create new object to trigger re-render
+      return { ...oldMap, [tooltipId]: ref }
+    })
+  }
+
+  const getTooltipData = 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],
+  )
+
+  const context = useMemo(() => {
+    const contextData: TooltipContextData = getTooltipData(defaultTooltipId)
+    const contextWrapper = Object.assign(
+      (tooltipId?: string) => getTooltipData(tooltipId),
+      contextData,
+    )
+    return contextWrapper
+  }, [getTooltipData])
+
+  return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>
+}
+
+/*
+  // this will use the "global" tooltip (same as `useTooltip()()`)
+  const { anchorRefs, attach, detach } = useTooltip()
+
+  // this will use the tooltip with id `tooltip-id`
+  const { anchorRefs, attach, detach } = useTooltip()('tooltip-id')
+*/
+export function useTooltip() {
+  return useContext(TooltipContext)
+}
+
+export default TooltipProvider

package/src/components/TooltipProvider/TooltipProviderTypes.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode, RefObject } from 'react'
+import type { ITooltipController } from 'components/TooltipController/TooltipControllerTypes'
+
+export type AnchorRef = RefObject<HTMLElement>
+
+export interface TooltipContextData {
+  anchorRefs: Set<AnchorRef>
+  activeAnchor: AnchorRef
+  attach: (...refs: AnchorRef[]) => void
+  detach: (...refs: AnchorRef[]) => void
+  setActiveAnchor: (ref: AnchorRef) => void
+}
+
+export type TooltipContextDataWrapper = TooltipContextData & {
+  // This means the context is a callable object
+  (tooltipId?: string): TooltipContextData
+}
+
+export interface ITooltipWrapper {
+  tooltipId?: string
+  children: ReactNode
+
+  place?: ITooltipController['place']
+  content?: ITooltipController['content']
+  html?: ITooltipController['html']
+  variant?: ITooltipController['variant']
+  offset?: ITooltipController['offset']
+  wrapper?: ITooltipController['wrapper']
+  events?: ITooltipController['events']
+  positionStrategy?: ITooltipController['positionStrategy']
+  delayShow?: ITooltipController['delayShow']
+  delayHide?: ITooltipController['delayHide']
+}

package/src/components/TooltipProvider/TooltipWrapper.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react'
+import { useTooltip } from './TooltipProvider'
+import type { ITooltipWrapper } from './TooltipProviderTypes'
+
+const TooltipWrapper = ({
+  tooltipId,
+  children,
+  place,
+  content,
+  html,
+  variant,
+  offset,
+  wrapper,
+  events,
+  positionStrategy,
+  delayShow,
+  delayHide,
+}: ITooltipWrapper) => {
+  const { attach, detach } = useTooltip()(tooltipId)
+  const anchorRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    attach(anchorRef)
+    return () => {
+      detach(anchorRef)
+    }
+  }, [])
+
+  return (
+    <span
+      ref={anchorRef}
+      data-tooltip-place={place}
+      data-tooltip-content={content}
+      data-tooltip-html={html}
+      data-tooltip-variant={variant}
+      data-tooltip-offset={offset}
+      data-tooltip-wrapper={wrapper}
+      data-tooltip-events={events}
+      data-tooltip-position-strategy={positionStrategy}
+      data-tooltip-delay-show={delayShow}
+      data-tooltip-delay-hide={delayHide}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default TooltipWrapper

package/src/components/TooltipProvider/index.ts

@@ -0,0 +1,2 @@
+export { default as TooltipProvider, useTooltip } from './TooltipProvider'
+export { default as TooltipWrapper } from './TooltipWrapper'

package/src/index-dev.tsx

@@ -0,0 +1,16 @@
+import { StrictMode, version } from 'react'
+import { createRoot } from 'react-dom/client'
+import './tokens.css'
+import App from './App'
+
+// eslint-disable-next-line no-console
+console.log('Parent folder loaded react version: ', version)
+
+const container = document.getElementById('app')
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = createRoot(container!)
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/index.tsx

@@ -0,0 +1,4 @@
+import './tokens.css'
+
+export { TooltipController as Tooltip } from './components/TooltipController'
+export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'

package/src/styles.module.css

@@ -0,0 +1,5 @@
+.main {
+  margin: 0 auto;
+  width: 100%;
+  height: 100vh;
+}

package/src/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip props basic tooltip component 1`] = `
+[
+  <span
+    id="basic-example"
+  >
+    Lorem Ipsum
+  </span>,
+  <div
+    className=""
+    role="tooltip"
+    style={{}}
+  >
+    Hello World!
+    <div
+      className=""
+      style={{}}
+    />
+  </div>,
+]
+`;
+
+exports[`tooltip props tooltip component - getContent 1`] = `
+[
+  <span
+    id="basic-example-get-content"
+  >
+    Lorem Ipsum
+  </span>,
+  <div
+    className=""
+    role="tooltip"
+    style={{}}
+  >
+    Hello World!
+    <div
+      className=""
+      style={{}}
+    />
+  </div>,
+]
+`;
+
+exports[`tooltip props tooltip component - html 1`] = `
+[
+  <span
+    id="basic-example-html"
+  >
+    Lorem Ipsum
+  </span>,
+  <div
+    className=""
+    role="tooltip"
+    style={{}}
+  >
+    <span
+      dangerouslySetInnerHTML={
+        {
+          "__html": "Hello World!",
+        }
+      }
+    />
+    <div
+      className=""
+      style={{}}
+    />
+  </div>,
+]
+`;
+
+exports[`tooltip props tooltip component - without anchorId 1`] = `
+[
+  <span>
+    Lorem Ipsum
+  </span>,
+  <div
+    className=""
+    role="tooltip"
+    style={{}}
+  >
+    Hello World!
+    <div
+      className=""
+      style={{}}
+    />
+  </div>,
+]
+`;
+
+exports[`tooltip props tooltip component - without element reference 1`] = `
+<div
+  className=""
+  role="tooltip"
+  style={{}}
+>
+  <div
+    className=""
+    style={{}}
+  />
+</div>
+`;

package/src/test/index.spec.js

@@ -0,0 +1,143 @@
+import renderer from 'react-test-renderer'
+import debounce from 'utils/debounce'
+import { computeTooltipPosition } from 'utils/compute-positions'
+import { TooltipController as Tooltip } from '../components/TooltipController'
+
+// Tell Jest to mock all timeout functions
+jest.useFakeTimers()
+
+// eslint-disable-next-line react/prop-types
+const TooltipProps = ({ id, ...tooltipParams }) => (
+  <>
+    <span id={id}>Lorem Ipsum</span>
+    <Tooltip anchorId={id} {...tooltipParams} />
+  </>
+)
+
+describe('tooltip props', () => {
+  test('tooltip component - without anchorId', () => {
+    const component = renderer.create(<TooltipProps content="Hello World!" />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('tooltip component - without element reference', () => {
+    const component = renderer.create(<Tooltip />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('basic tooltip component', () => {
+    const component = renderer.create(<TooltipProps id="basic-example" content="Hello World!" />)
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('tooltip component - html', () => {
+    const component = renderer.create(
+      <TooltipProps id="basic-example-html" html="Hello World!" variant="info" place="top" />,
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('tooltip component - getContent', () => {
+    const component = renderer.create(
+      <TooltipProps
+        id="basic-example-get-content"
+        content="Hello World!"
+        getContent={(value) => `${value} Manipuled!`}
+        variant="info"
+        place="top"
+      />,
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
+
+describe('compute positions', () => {
+  test('empty reference elements', async () => {
+    const value = await computeTooltipPosition({
+      elementReference: null,
+      tooltipReference: null,
+      tooltipArrowReference: null,
+    })
+
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+  })
+
+  test('empty tooltip reference element', async () => {
+    const element = document.createElement('div')
+    const value = await computeTooltipPosition({
+      elementReference: element,
+      tooltipReference: null,
+      tooltipArrowReference: null,
+    })
+
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+  })
+
+  test('empty tooltip arrow reference element', async () => {
+    const element = document.createElement('div')
+    const elementTooltip = document.createElement('div')
+    const value = await computeTooltipPosition({
+      elementReference: element,
+      tooltipReference: elementTooltip,
+      tooltipArrowReference: null,
+    })
+
+    expect(value).toEqual({
+      tooltipArrowStyles: {},
+      tooltipStyles: {
+        left: '5px',
+        top: '10px',
+      },
+    })
+  })
+
+  test('all reference elements', async () => {
+    const element = document.createElement('div')
+    const elementTooltip = document.createElement('div')
+    const elementTooltipArrow = document.createElement('div')
+    const value = await computeTooltipPosition({
+      elementReference: element,
+      tooltipReference: elementTooltip,
+      tooltipArrowReference: elementTooltipArrow,
+    })
+
+    expect(value).toEqual({
+      tooltipArrowStyles: {
+        bottom: '-4px',
+        left: '0px',
+        right: '',
+        top: '',
+      },
+      tooltipStyles: {
+        left: '5px',
+        top: '-10px',
+      },
+    })
+  })
+})
+
+describe('debounce', () => {
+  let func
+  let debouncedFunc
+
+  beforeEach((timeout = 1000) => {
+    func = jest.fn()
+    debouncedFunc = debounce(func, timeout)
+  })
+
+  test('execute just once', () => {
+    for (let i = 0; i < 100; i += 1) {
+      debouncedFunc()
+    }
+
+    // Fast-forward time
+    jest.runAllTimers()
+
+    expect(func).toBeCalledTimes(1)
+  })
+})

package/src/tokens.css

@@ -0,0 +1,8 @@
+:root {
+  --rt-color-white: #fff;
+  --rt-color-dark: #222;
+  --rt-color-success: #8dc572;
+  --rt-color-error: #be6464;
+  --rt-color-warning: #f0ad4e;
+  --rt-color-info: #337ab7;
+}

package/src/utils/compute-positions-types.d.ts

@@ -0,0 +1,8 @@
+export interface IComputePositions {
+  elementReference?: Element | HTMLElement | null
+  tooltipReference?: Element | HTMLElement | null
+  tooltipArrowReference?: Element | HTMLElement | null
+  place?: 'top' | 'right' | 'bottom' | 'left'
+  offset?: number
+  strategy?: 'absolute' | 'fixed'
+}

package/src/utils/compute-positions.ts

@@ -0,0 +1,65 @@
+import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom'
+import type { IComputePositions } from './compute-positions-types'
+
+export const computeTooltipPosition = async ({
+  elementReference = null,
+  tooltipReference = null,
+  tooltipArrowReference = null,
+  place = 'top',
+  offset: offsetValue = 10,
+  strategy = 'absolute',
+}: IComputePositions) => {
+  if (!elementReference) {
+    // elementReference can be null or undefined and we will not compute the position
+    // eslint-disable-next-line no-console
+    // console.error('The reference element for tooltip was not defined: ', elementReference)
+    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+  }
+
+  if (tooltipReference === null) {
+    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+  }
+
+  const middleware = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })]
+
+  if (tooltipArrowReference) {
+    middleware.push(arrow({ element: tooltipArrowReference as HTMLElement }))
+    return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
+      placement: place,
+      strategy,
+      middleware,
+    }).then(({ x, y, placement, middlewareData }) => {
+      const styles = { left: `${x}px`, top: `${y}px` }
+
+      const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }
+
+      const staticSide =
+        {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right',
+        }[placement.split('-')[0]] ?? 'bottom'
+
+      const arrowStyle = {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [staticSide]: '-4px',
+      }
+
+      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle }
+    })
+  }
+
+  return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
+    placement: 'bottom',
+    strategy,
+    middleware,
+  }).then(({ x, y }) => {
+    const styles = { left: `${x}px`, top: `${y}px` }
+
+    return { tooltipStyles: styles, tooltipArrowStyles: {} }
+  })
+}

package/src/utils/debounce.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * This function debounce the received function
+ * @param { function } 	func				Function to be debounced
+ * @param { number } 		wait				Time to wait before execut the function
+ * @param { boolean } 	immediate		Param to define if the function will be executed immediately
+ */
+const debounce = (func: (...args: any[]) => void, wait?: number, immediate?: true) => {
+  let timeout: NodeJS.Timeout | null = null
+
+  return function debounced(this: typeof func, ...args: any[]) {
+    const later = () => {
+      timeout = null
+      if (!immediate) {
+        func.apply(this, args)
+      }
+    }
+
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+
+    timeout = setTimeout(later, wait)
+  }
+}
+
+export default debounce