react-tooltip/dist/react-tooltip.min.cjs.map

react tooltip component

{"version":3,"file":"react-tooltip.min.cjs","sources":["../src/utils/handle-style.ts","../src/utils/compute-tooltip-position.ts","../src/utils/css-supports.ts","../src/utils/debounce.ts","../src/utils/deep-equal.ts","../src/utils/get-scroll-parent.ts","../src/utils/use-isomorphic-layout-effect.ts","../src/utils/clear-timeout-ref.ts","../src/components/TooltipProvider/TooltipProvider.tsx","../src/components/Tooltip/Tooltip.tsx","../src/utils/css-time-to-ms.ts","../src/components/TooltipContent/TooltipContent.tsx","../src/components/TooltipController/TooltipController.tsx","../src/index.tsx","../src/components/TooltipProvider/TooltipWrapper.tsx"],"sourcesContent":["// This is the ID for the core styles of ReactTooltip\nconst REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles'\n// This is the ID for the visual styles of ReactTooltip\nconst REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles'\n\nconst injected = {\n  core: false,\n  base: false,\n}\n\nfunction injectStyle({\n  css,\n  id = REACT_TOOLTIP_BASE_STYLES_ID,\n  type = 'base',\n  ref,\n}: {\n  css: string\n  id?: string\n  type?: 'core' | 'base'\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref?: any\n}) {\n  if (!css || typeof document === 'undefined' || injected[type]) {\n    return\n  }\n\n  if (\n    type === 'core' &&\n    typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`\n    process?.env?.REACT_TOOLTIP_DISABLE_CORE_STYLES\n  ) {\n    return\n  }\n\n  if (\n    type !== 'base' &&\n    typeof process !== 'undefined' && // this validation prevents docs from breaking even with `process?`\n    process?.env?.REACT_TOOLTIP_DISABLE_BASE_STYLES\n  ) {\n    return\n  }\n\n  if (type === 'core') {\n    // eslint-disable-next-line no-param-reassign\n    id = REACT_TOOLTIP_CORE_STYLES_ID\n  }\n\n  if (!ref) {\n    // eslint-disable-next-line no-param-reassign\n    ref = {}\n  }\n  const { insertAt } = ref\n\n  if (document.getElementById(id)) {\n    // this could happen in cases the tooltip is imported by multiple js modules\n    return\n  }\n\n  const head = document.head || document.getElementsByTagName('head')[0]\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const style: any = document.createElement('style')\n  style.id = id\n  style.type = 'text/css'\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild)\n    } else {\n      head.appendChild(style)\n    }\n  } else {\n    head.appendChild(style)\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css\n  } else {\n    style.appendChild(document.createTextNode(css))\n  }\n\n  injected[type] = true\n}\n\n/**\n * @deprecated Use the `disableStyleInjection` tooltip prop instead.\n * See https://react-tooltip.com/docs/examples/styling#disabling-reacttooltip-css\n */\nfunction removeStyle({\n  type = 'base',\n  id = REACT_TOOLTIP_BASE_STYLES_ID,\n}: {\n  type?: 'core' | 'base'\n  id?: string\n} = {}) {\n  if (!injected[type]) {\n    return\n  }\n\n  if (type === 'core') {\n    // eslint-disable-next-line no-param-reassign\n    id = REACT_TOOLTIP_CORE_STYLES_ID\n  }\n\n  const style = document.getElementById(id)\n  if (style?.tagName === 'style') {\n    style?.remove()\n  } else if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[react-tooltip] Failed to remove 'style' element with id '${id}'. Call \\`injectStyle()\\` first`,\n    )\n  }\n\n  injected[type] = false\n}\n\nexport { injectStyle, removeStyle }\n","import { computePosition, offset, shift, arrow, flip } from '@floating-ui/dom'\nimport type { IComputePositionArgs } from './compute-tooltip-position-types'\n\nconst computeTooltipPosition = async ({\n  elementReference = null,\n  tooltipReference = null,\n  tooltipArrowReference = null,\n  place = 'top',\n  offset: offsetValue = 10,\n  strategy = 'absolute',\n  middlewares = [\n    offset(Number(offsetValue)),\n    flip({\n      fallbackAxisSideDirection: 'start',\n    }),\n    shift({ padding: 5 }),\n  ],\n  border,\n  arrowSize = 8,\n}: IComputePositionArgs) => {\n  if (!elementReference) {\n    // elementReference can be null or undefined and we will not compute the position\n    // eslint-disable-next-line no-console\n    // console.error('The reference element for tooltip was not defined: ', elementReference)\n    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }\n  }\n\n  if (tooltipReference === null) {\n    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }\n  }\n\n  const middleware = middlewares\n\n  if (tooltipArrowReference) {\n    middleware.push(arrow({ element: tooltipArrowReference as HTMLElement, padding: 5 }))\n\n    return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {\n      placement: place,\n      strategy,\n      middleware,\n    }).then(({ x, y, placement, middlewareData }) => {\n      const styles = { left: `${x}px`, top: `${y}px`, border }\n\n      /* c8 ignore start */\n      const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }\n\n      const staticSide =\n        {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]] ?? 'bottom'\n      /* c8 ignore end */\n\n      const borderSide = border && {\n        borderBottom: border,\n        borderRight: border,\n      }\n\n      let borderWidth = 0\n      if (border) {\n        const match = `${border}`.match(/(\\d+)px/)\n        if (match?.[1]) {\n          borderWidth = Number(match[1])\n        } else {\n          /**\n           * this means `border` was set without `width`,\n           * or non-px value (such as `medium`, `thick`, ...)\n           */\n          borderWidth = 1\n        }\n      }\n\n      /* c8 ignore start */\n      const arrowStyle = {\n        left: arrowX != null ? `${arrowX}px` : '',\n        top: arrowY != null ? `${arrowY}px` : '',\n        right: '',\n        bottom: '',\n        ...borderSide,\n        [staticSide]: `-${arrowSize / 2 + borderWidth}px`,\n      }\n      /* c8 ignore end */\n\n      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }\n    })\n  }\n\n  return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {\n    placement: 'bottom',\n    strategy,\n    middleware,\n  }).then(({ x, y, placement }) => {\n    const styles = { left: `${x}px`, top: `${y}px` }\n\n    return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement }\n  })\n}\n\nexport default computeTooltipPosition\n","const cssSupports = (property: string, value: string): boolean => {\n  const hasCssSupports = 'CSS' in window && 'supports' in window.CSS\n  return hasCssSupports ? window.CSS.supports(property, value) : true\n}\n\nexport default cssSupports\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * This function debounce the received function\n * @param { function } \tfunc\t\t\t\tFunction to be debounced\n * @param { number } \t\twait\t\t\t\tTime to wait before execut the function\n * @param { boolean } \timmediate\t\tParam to define if the function will be executed immediately\n */\nconst debounce = <T, A extends any[]>(\n  func: (...args: A) => void,\n  wait?: number,\n  immediate?: boolean,\n) => {\n  let timeout: NodeJS.Timeout | null = null\n\n  const debounced = function debounced(this: T, ...args: A): void {\n    const later = () => {\n      timeout = null\n      if (!immediate) {\n        func.apply(this, args)\n      }\n    }\n\n    if (immediate && !timeout) {\n      /**\n       * there's no need to clear the timeout\n       * since we expect it to resolve and set `timeout = null`\n       */\n      func.apply(this, args)\n      timeout = setTimeout(later, wait)\n    }\n\n    if (!immediate) {\n      if (timeout) {\n        clearTimeout(timeout)\n      }\n      timeout = setTimeout(later, wait)\n    }\n  }\n\n  debounced.cancel = () => {\n    /* c8 ignore start */\n    if (!timeout) {\n      return\n    }\n    /* c8 ignore end */\n    clearTimeout(timeout)\n    timeout = null\n  }\n\n  return debounced\n}\n\nexport default debounce\n","const isObject = (object: unknown): object is Record<string, unknown> => {\n  return object !== null && !Array.isArray(object) && typeof object === 'object'\n}\n\nconst deepEqual = (object1: unknown, object2: unknown): boolean => {\n  if (object1 === object2) {\n    return true\n  }\n\n  if (Array.isArray(object1) && Array.isArray(object2)) {\n    if (object1.length !== object2.length) {\n      return false\n    }\n    return object1.every((val, index) => deepEqual(val, object2[index]))\n  }\n\n  if (Array.isArray(object1) !== Array.isArray(object2)) {\n    return false\n  }\n\n  if (!isObject(object1) || !isObject(object2)) {\n    return object1 === object2\n  }\n\n  const keys1 = Object.keys(object1)\n  const keys2 = Object.keys(object2)\n  if (keys1.length !== keys2.length) {\n    return false\n  }\n\n  return keys1.every((key) => deepEqual(object1[key], object2[key]))\n}\n\nexport default deepEqual\n","const isScrollable = (node: Element) => {\n  if (!(node instanceof HTMLElement || node instanceof SVGElement)) {\n    return false\n  }\n  const style = getComputedStyle(node)\n  return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {\n    const value = style.getPropertyValue(propertyName)\n    return value === 'auto' || value === 'scroll'\n  })\n}\n\nconst getScrollParent = (node: Element | null) => {\n  if (!node) {\n    return null\n  }\n  let currentParent = node.parentElement\n  while (currentParent) {\n    if (isScrollable(currentParent)) {\n      return currentParent\n    }\n    currentParent = currentParent.parentElement\n  }\n  return document.scrollingElement || document.documentElement\n}\n\nexport default getScrollParent\n","import { useLayoutEffect, useEffect } from 'react'\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport default useIsomorphicLayoutEffect\n","const clearTimeoutRef = (ref: React.MutableRefObject<NodeJS.Timeout | null>) => {\n  if (ref.current) {\n    clearTimeout(ref.current)\n    // eslint-disable-next-line no-param-reassign\n    ref.current = null\n  }\n}\n\nexport default clearTimeoutRef\n","import React, {\n  createContext,\n  PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from 'react'\n\nimport type {\n  AnchorRef,\n  TooltipContextData,\n  TooltipContextDataWrapper,\n} from './TooltipProviderTypes'\n\nconst DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID'\nconst DEFAULT_CONTEXT_DATA: TooltipContextData = {\n  anchorRefs: new Set(),\n  activeAnchor: { current: null },\n  attach: () => {\n    /* attach anchor element */\n  },\n  detach: () => {\n    /* detach anchor element */\n  },\n  setActiveAnchor: () => {\n    /* set active anchor */\n  },\n}\n\nconst DEFAULT_CONTEXT_DATA_WRAPPER: TooltipContextDataWrapper = {\n  getTooltipData: () => DEFAULT_CONTEXT_DATA,\n}\n\nconst TooltipContext = createContext<TooltipContextDataWrapper>(DEFAULT_CONTEXT_DATA_WRAPPER)\n\n/**\n * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.\n * See https://react-tooltip.com/docs/getting-started\n */\nconst TooltipProvider: React.FC<PropsWithChildren<void>> = ({ children }) => {\n  const [anchorRefMap, setAnchorRefMap] = useState<Record<string, Set<AnchorRef>>>({\n    [DEFAULT_TOOLTIP_ID]: new Set(),\n  })\n  const [activeAnchorMap, setActiveAnchorMap] = useState<Record<string, AnchorRef>>({\n    [DEFAULT_TOOLTIP_ID]: { current: null },\n  })\n\n  const attach = (tooltipId: string, ...refs: AnchorRef[]) => {\n    setAnchorRefMap((oldMap) => {\n      const tooltipRefs = oldMap[tooltipId] ?? new Set()\n      refs.forEach((ref) => tooltipRefs.add(ref))\n      // create new object to trigger re-render\n      return { ...oldMap, [tooltipId]: new Set(tooltipRefs) }\n    })\n  }\n\n  const detach = (tooltipId: string, ...refs: AnchorRef[]) => {\n    setAnchorRefMap((oldMap) => {\n      const tooltipRefs = oldMap[tooltipId]\n      if (!tooltipRefs) {\n        // tooltip not found\n        // maybe thow error?\n        return oldMap\n      }\n      refs.forEach((ref) => tooltipRefs.delete(ref))\n      // create new object to trigger re-render\n      return { ...oldMap }\n    })\n  }\n\n  const setActiveAnchor = (tooltipId: string, ref: React.RefObject<HTMLElement>) => {\n    setActiveAnchorMap((oldMap) => {\n      if (oldMap[tooltipId]?.current === ref.current) {\n        return oldMap\n      }\n      // create new object to trigger re-render\n      return { ...oldMap, [tooltipId]: ref }\n    })\n  }\n\n  const getTooltipData = useCallback(\n    (tooltipId = DEFAULT_TOOLTIP_ID) => ({\n      anchorRefs: anchorRefMap[tooltipId] ?? new Set(),\n      activeAnchor: activeAnchorMap[tooltipId] ?? { current: null },\n      attach: (...refs: AnchorRef[]) => attach(tooltipId, ...refs),\n      detach: (...refs: AnchorRef[]) => detach(tooltipId, ...refs),\n      setActiveAnchor: (ref: AnchorRef) => setActiveAnchor(tooltipId, ref),\n    }),\n    [anchorRefMap, activeAnchorMap, attach, detach],\n  )\n\n  const context = useMemo(() => {\n    return {\n      getTooltipData,\n    }\n  }, [getTooltipData])\n\n  return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>\n}\n\nexport function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {\n  return useContext(TooltipContext).getTooltipData(tooltipId)\n}\n\nexport default TooltipProvider\n","import React, { useEffect, useState, useRef, useCallback, useImperativeHandle } from 'react'\nimport { autoUpdate } from '@floating-ui/dom'\nimport classNames from 'classnames'\nimport {\n  debounce,\n  deepEqual,\n  useIsomorphicLayoutEffect,\n  getScrollParent,\n  computeTooltipPosition,\n  cssTimeToMs,\n  clearTimeoutRef,\n} from 'utils'\nimport type { IComputedPosition } from 'utils'\nimport { useTooltip } from 'components/TooltipProvider'\nimport coreStyles from './core-styles.module.css'\nimport styles from './styles.module.css'\nimport type {\n  AnchorCloseEvents,\n  AnchorOpenEvents,\n  GlobalCloseEvents,\n  IPosition,\n  ITooltip,\n  TooltipImperativeOpenOptions,\n} from './TooltipTypes'\n\nconst Tooltip = ({\n  // props\n  forwardRef,\n  id,\n  className,\n  classNameArrow,\n  variant = 'dark',\n  anchorId,\n  anchorSelect,\n  place = 'top',\n  offset = 10,\n  events = ['hover'],\n  openOnClick = false,\n  positionStrategy = 'absolute',\n  middlewares,\n  wrapper: WrapperElement,\n  delayShow = 0,\n  delayHide = 0,\n  float = false,\n  hidden = false,\n  noArrow = false,\n  clickable = false,\n  closeOnEsc = false,\n  closeOnScroll = false,\n  closeOnResize = false,\n  openEvents,\n  closeEvents,\n  globalCloseEvents,\n  imperativeModeOnly,\n  style: externalStyles,\n  position,\n  afterShow,\n  afterHide,\n  disableTooltip,\n  // props handled by controller\n  content,\n  contentWrapperRef,\n  isOpen,\n  defaultIsOpen = false,\n  setIsOpen,\n  previousActiveAnchor,\n  activeAnchor,\n  setActiveAnchor,\n  border,\n  opacity,\n  arrowColor,\n  arrowSize = 8,\n  role = 'tooltip',\n}: ITooltip) => {\n  const tooltipRef = useRef<HTMLElement>(null)\n  const tooltipArrowRef = useRef<HTMLElement>(null)\n  const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const missedTransitionTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const [computedPosition, setComputedPosition] = useState<IComputedPosition>({\n    tooltipStyles: {},\n    tooltipArrowStyles: {},\n    place,\n  })\n  const [show, setShow] = useState(false)\n  const [rendered, setRendered] = useState(false)\n  const [imperativeOptions, setImperativeOptions] = useState<TooltipImperativeOpenOptions | null>(\n    null,\n  )\n  const wasShowing = useRef(false)\n  const lastFloatPosition = useRef<IPosition | null>(null)\n  /**\n   * @todo Remove this in a future version (provider/wrapper method is deprecated)\n   */\n  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id)\n  const hoveringTooltip = useRef(false)\n  const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])\n  const mounted = useRef(false)\n\n  /**\n   * @todo Update when deprecated stuff gets removed.\n   */\n  const shouldOpenOnClick = openOnClick || events.includes('click')\n  const hasClickEvent =\n    shouldOpenOnClick || openEvents?.click || openEvents?.dblclick || openEvents?.mousedown\n  const actualOpenEvents: AnchorOpenEvents = openEvents\n    ? { ...openEvents }\n    : {\n        mouseover: true,\n        focus: true,\n        mouseenter: false,\n        click: false,\n        dblclick: false,\n        mousedown: false,\n      }\n  if (!openEvents && shouldOpenOnClick) {\n    Object.assign(actualOpenEvents, {\n      mouseenter: false,\n      focus: false,\n      mouseover: false,\n      click: true,\n    })\n  }\n  const actualCloseEvents: AnchorCloseEvents = closeEvents\n    ? { ...closeEvents }\n    : {\n        mouseout: true,\n        blur: true,\n        mouseleave: false,\n        click: false,\n        dblclick: false,\n        mouseup: false,\n      }\n  if (!closeEvents && shouldOpenOnClick) {\n    Object.assign(actualCloseEvents, {\n      mouseleave: false,\n      blur: false,\n      mouseout: false,\n    })\n  }\n  const actualGlobalCloseEvents: GlobalCloseEvents = globalCloseEvents\n    ? { ...globalCloseEvents }\n    : {\n        escape: closeOnEsc || false,\n        scroll: closeOnScroll || false,\n        resize: closeOnResize || false,\n        clickOutsideAnchor: hasClickEvent || false,\n      }\n\n  if (imperativeModeOnly) {\n    Object.assign(actualOpenEvents, {\n      mouseover: false,\n      focus: false,\n      mouseenter: false,\n      click: false,\n      dblclick: false,\n      mousedown: false,\n    })\n    Object.assign(actualCloseEvents, {\n      mouseout: false,\n      blur: false,\n      mouseleave: false,\n      click: false,\n      dblclick: false,\n      mouseup: false,\n    })\n    Object.assign(actualGlobalCloseEvents, {\n      escape: false,\n      scroll: false,\n      resize: false,\n      clickOutsideAnchor: false,\n    })\n  }\n\n  /**\n   * useLayoutEffect runs before useEffect,\n   * but should be used carefully because of caveats\n   * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats\n   */\n  useIsomorphicLayoutEffect(() => {\n    mounted.current = true\n    return () => {\n      mounted.current = false\n    }\n  }, [])\n\n  const handleShow = (value: boolean) => {\n    if (!mounted.current) {\n      return\n    }\n    if (value) {\n      setRendered(true)\n    }\n    /**\n     * wait for the component to render and calculate position\n     * before actually showing\n     */\n    setTimeout(() => {\n      if (!mounted.current) {\n        return\n      }\n      setIsOpen?.(value)\n      if (isOpen === undefined) {\n        setShow(value)\n      }\n    }, 10)\n  }\n\n  /**\n   * Add aria-describedby to activeAnchor when tooltip is active\n   */\n  useEffect(() => {\n    if (!id) return\n\n    function getAriaDescribedBy(element: HTMLElement | null) {\n      return element?.getAttribute('aria-describedby')?.split(' ') || []\n    }\n\n    function removeAriaDescribedBy(element: HTMLElement | null) {\n      const newDescribedBy = getAriaDescribedBy(element).filter((s) => s !== id)\n      if (newDescribedBy.length) {\n        element?.setAttribute('aria-describedby', newDescribedBy.join(' '))\n      } else {\n        element?.removeAttribute('aria-describedby')\n      }\n    }\n\n    if (show) {\n      removeAriaDescribedBy(previousActiveAnchor)\n      const currentDescribedBy = getAriaDescribedBy(activeAnchor)\n      const describedBy = [...new Set([...currentDescribedBy, id])].filter(Boolean).join(' ')\n      activeAnchor?.setAttribute('aria-describedby', describedBy)\n    } else {\n      removeAriaDescribedBy(activeAnchor)\n    }\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      // cleanup aria-describedby when the tooltip is closed\n      removeAriaDescribedBy(activeAnchor)\n      removeAriaDescribedBy(previousActiveAnchor)\n    }\n  }, [activeAnchor, show, id, previousActiveAnchor])\n\n  /**\n   * this replicates the effect from `handleShow()`\n   * when `isOpen` is changed from outside\n   */\n  useEffect(() => {\n    if (isOpen === undefined) {\n      return () => null\n    }\n    if (isOpen) {\n      setRendered(true)\n    }\n    const timeout = setTimeout(() => {\n      setShow(isOpen)\n    }, 10)\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    if (show === wasShowing.current) {\n      return\n    }\n    clearTimeoutRef(missedTransitionTimerRef)\n    wasShowing.current = show\n    if (show) {\n      afterShow?.()\n    } else {\n      /**\n       * see `onTransitionEnd` on tooltip wrapper\n       */\n      const style = getComputedStyle(document.body)\n      const transitionShowDelay = cssTimeToMs(style.getPropertyValue('--rt-transition-show-delay'))\n      missedTransitionTimerRef.current = setTimeout(() => {\n        /**\n         * if the tooltip switches from `show === true` to `show === false` too fast\n         * the transition never runs, so `onTransitionEnd` callback never gets fired\n         */\n        setRendered(false)\n        setImperativeOptions(null)\n        afterHide?.()\n        // +25ms just to make sure `onTransitionEnd` (if it gets fired) has time to run\n      }, transitionShowDelay + 25)\n    }\n  }, [show])\n\n  const handleComputedPosition = (newComputedPosition: IComputedPosition) => {\n    setComputedPosition((oldComputedPosition) =>\n      deepEqual(oldComputedPosition, newComputedPosition)\n        ? oldComputedPosition\n        : newComputedPosition,\n    )\n  }\n\n  const handleShowTooltipDelayed = (delay = delayShow) => {\n    clearTimeoutRef(tooltipShowDelayTimerRef)\n\n    if (rendered) {\n      // if the tooltip is already rendered, ignore delay\n      handleShow(true)\n      return\n    }\n\n    tooltipShowDelayTimerRef.current = setTimeout(() => {\n      handleShow(true)\n    }, delay)\n  }\n\n  const handleHideTooltipDelayed = (delay = delayHide) => {\n    clearTimeoutRef(tooltipHideDelayTimerRef)\n\n    tooltipHideDelayTimerRef.current = setTimeout(() => {\n      if (hoveringTooltip.current) {\n        return\n      }\n      handleShow(false)\n    }, delay)\n  }\n\n  const handleShowTooltip = (event?: Event) => {\n    if (!event) {\n      return\n    }\n    const target = (event.currentTarget ?? event.target) as HTMLElement | null\n    if (!target?.isConnected) {\n      /**\n       * this happens when the target is removed from the DOM\n       * at the same time the tooltip gets triggered\n       */\n      setActiveAnchor(null)\n      setProviderActiveAnchor({ current: null })\n      return\n    }\n    if (delayShow) {\n      handleShowTooltipDelayed()\n    } else {\n      handleShow(true)\n    }\n    setActiveAnchor(target)\n    setProviderActiveAnchor({ current: target })\n\n    clearTimeoutRef(tooltipHideDelayTimerRef)\n  }\n\n  const handleHideTooltip = () => {\n    if (clickable) {\n      // allow time for the mouse to reach the tooltip, in case there's a gap\n      handleHideTooltipDelayed(delayHide || 100)\n    } else if (delayHide) {\n      handleHideTooltipDelayed()\n    } else {\n      handleShow(false)\n    }\n\n    clearTimeoutRef(tooltipShowDelayTimerRef)\n  }\n\n  const handleTooltipPosition = ({ x, y }: IPosition) => {\n    const virtualElement = {\n      getBoundingClientRect() {\n        return {\n          x,\n          y,\n          width: 0,\n          height: 0,\n          top: y,\n          left: x,\n          right: x,\n          bottom: y,\n        }\n      },\n    } as Element\n    computeTooltipPosition({\n      place: imperativeOptions?.place ?? place,\n      offset,\n      elementReference: virtualElement,\n      tooltipReference: tooltipRef.current,\n      tooltipArrowReference: tooltipArrowRef.current,\n      strategy: positionStrategy,\n      middlewares,\n      border,\n      arrowSize,\n    }).then((computedStylesData) => {\n      handleComputedPosition(computedStylesData)\n    })\n  }\n\n  const handlePointerMove = (event?: Event) => {\n    if (!event) {\n      return\n    }\n    const mouseEvent = event as MouseEvent\n    const mousePosition = {\n      x: mouseEvent.clientX,\n      y: mouseEvent.clientY,\n    }\n    handleTooltipPosition(mousePosition)\n    lastFloatPosition.current = mousePosition\n  }\n\n  const handleClickOutsideAnchors = (event: MouseEvent) => {\n    if (!show) {\n      return\n    }\n    const target = event.target as HTMLElement\n    if (!target.isConnected) {\n      return\n    }\n    if (tooltipRef.current?.contains(target)) {\n      return\n    }\n    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)\n    const anchors = [anchorById, ...anchorsBySelect]\n    if (anchors.some((anchor) => anchor?.contains(target))) {\n      return\n    }\n    handleShow(false)\n    clearTimeoutRef(tooltipShowDelayTimerRef)\n  }\n\n  // debounce handler to prevent call twice when\n  // mouse enter and focus events being triggered toggether\n  const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true)\n  const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true)\n  // If either of the functions is called while the other is still debounced,\n  // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)\n  // sequence of events, the tooltip will stay open because the hide debounce\n  // from leave A prevented the leave B event from calling it, leaving the\n  // tooltip visible.\n  const debouncedHandleShowTooltip = (e?: Event) => {\n    internalDebouncedHandleHideTooltip.cancel()\n    internalDebouncedHandleShowTooltip(e)\n  }\n  const debouncedHandleHideTooltip = () => {\n    internalDebouncedHandleShowTooltip.cancel()\n    internalDebouncedHandleHideTooltip()\n  }\n\n  const updateTooltipPosition = useCallback(() => {\n    const actualPosition = imperativeOptions?.position ?? position\n    if (actualPosition) {\n      // if `position` is set, override regular and `float` positioning\n      handleTooltipPosition(actualPosition)\n      return\n    }\n\n    if (float) {\n      if (lastFloatPosition.current) {\n        /*\n          Without this, changes to `content`, `place`, `offset`, ..., will only\n          trigger a position calculation after a `mousemove` event.\n\n          To see why this matters, comment this line, run `yarn dev` and click the\n          \"Hover me!\" anchor.\n        */\n        handleTooltipPosition(lastFloatPosition.current)\n      }\n      // if `float` is set, override regular positioning\n      return\n    }\n\n    if (!activeAnchor?.isConnected) {\n      return\n    }\n\n    computeTooltipPosition({\n      place: imperativeOptions?.place ?? place,\n      offset,\n      elementReference: activeAnchor,\n      tooltipReference: tooltipRef.current,\n      tooltipArrowReference: tooltipArrowRef.current,\n      strategy: positionStrategy,\n      middlewares,\n      border,\n      arrowSize,\n    }).then((computedStylesData) => {\n      if (!mounted.current) {\n        // invalidate computed positions after remount\n        return\n      }\n      handleComputedPosition(computedStylesData)\n    })\n  }, [\n    show,\n    activeAnchor,\n    content,\n    externalStyles,\n    place,\n    imperativeOptions?.place,\n    offset,\n    positionStrategy,\n    position,\n    imperativeOptions?.position,\n    float,\n    arrowSize,\n  ])\n\n  useEffect(() => {\n    const elementRefs = new Set(anchorRefs)\n\n    anchorsBySelect.forEach((anchor) => {\n      if (disableTooltip?.(anchor)) {\n        return\n      }\n      elementRefs.add({ current: anchor })\n    })\n\n    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)\n    if (anchorById && !disableTooltip?.(anchorById)) {\n      elementRefs.add({ current: anchorById })\n    }\n\n    const handleScrollResize = () => {\n      handleShow(false)\n    }\n\n    const anchorScrollParent = getScrollParent(activeAnchor)\n    const tooltipScrollParent = getScrollParent(tooltipRef.current)\n\n    if (actualGlobalCloseEvents.scroll) {\n      window.addEventListener('scroll', handleScrollResize)\n      anchorScrollParent?.addEventListener('scroll', handleScrollResize)\n      tooltipScrollParent?.addEventListener('scroll', handleScrollResize)\n    }\n    let updateTooltipCleanup: null | (() => void) = null\n    if (actualGlobalCloseEvents.resize) {\n      window.addEventListener('resize', handleScrollResize)\n    } else if (activeAnchor && tooltipRef.current) {\n      updateTooltipCleanup = autoUpdate(\n        activeAnchor as HTMLElement,\n        tooltipRef.current as HTMLElement,\n        updateTooltipPosition,\n        {\n          ancestorResize: true,\n          elementResize: true,\n          layoutShift: true,\n        },\n      )\n    }\n\n    const handleEsc = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return\n      }\n      handleShow(false)\n    }\n    if (actualGlobalCloseEvents.escape) {\n      window.addEventListener('keydown', handleEsc)\n    }\n\n    if (actualGlobalCloseEvents.clickOutsideAnchor) {\n      window.addEventListener('click', handleClickOutsideAnchors)\n    }\n\n    const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []\n\n    const activeAnchorContainsTarget = (event?: Event): boolean =>\n      Boolean(event?.target && activeAnchor?.contains(event.target as HTMLElement))\n    const handleClickOpenTooltipAnchor = (event?: Event) => {\n      if (show && activeAnchorContainsTarget(event)) {\n        /**\n         * ignore clicking the anchor that was used to open the tooltip.\n         * this avoids conflict with the click close event.\n         */\n        return\n      }\n      handleShowTooltip(event)\n    }\n    const handleClickCloseTooltipAnchor = (event?: Event) => {\n      if (!show || !activeAnchorContainsTarget(event)) {\n        /**\n         * ignore clicking the anchor that was NOT used to open the tooltip.\n         * this avoids closing the tooltip when clicking on a\n         * new anchor with the tooltip already open.\n         */\n        return\n      }\n      handleHideTooltip()\n    }\n\n    const regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur']\n    const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup']\n\n    Object.entries(actualOpenEvents).forEach(([event, enabled]) => {\n      if (!enabled) {\n        return\n      }\n      if (regularEvents.includes(event)) {\n        enabledEvents.push({ event, listener: debouncedHandleShowTooltip })\n      } else if (clickEvents.includes(event)) {\n        enabledEvents.push({ event, listener: handleClickOpenTooltipAnchor })\n      } else {\n        // never happens\n      }\n    })\n\n    Object.entries(actualCloseEvents).forEach(([event, enabled]) => {\n      if (!enabled) {\n        return\n      }\n      if (regularEvents.includes(event)) {\n        enabledEvents.push({ event, listener: debouncedHandleHideTooltip })\n      } else if (clickEvents.includes(event)) {\n        enabledEvents.push({ event, listener: handleClickCloseTooltipAnchor })\n      } else {\n        // never happens\n      }\n    })\n\n    if (float) {\n      enabledEvents.push({\n        event: 'pointermove',\n        listener: handlePointerMove,\n      })\n    }\n\n    const handleMouseOverTooltip = () => {\n      hoveringTooltip.current = true\n    }\n    const handleMouseOutTooltip = () => {\n      hoveringTooltip.current = false\n      handleHideTooltip()\n    }\n\n    const addHoveringTooltipListeners =\n      clickable && (actualCloseEvents.mouseout || actualCloseEvents.mouseleave)\n    if (addHoveringTooltipListeners) {\n      // used to keep the tooltip open when hovering from anchor to tooltip.\n      // only relevant if either `mouseout`/`mouseleave` is in use\n      tooltipRef.current?.addEventListener('mouseover', handleMouseOverTooltip)\n      tooltipRef.current?.addEventListener('mouseout', handleMouseOutTooltip)\n    }\n\n    enabledEvents.forEach(({ event, listener }) => {\n      elementRefs.forEach((ref) => {\n        ref.current?.addEventListener(event, listener)\n      })\n    })\n\n    return () => {\n      if (actualGlobalCloseEvents.scroll) {\n        window.removeEventListener('scroll', handleScrollResize)\n        anchorScrollParent?.removeEventListener('scroll', handleScrollResize)\n        tooltipScrollParent?.removeEventListener('scroll', handleScrollResize)\n      }\n      if (actualGlobalCloseEvents.resize) {\n        window.removeEventListener('resize', handleScrollResize)\n      } else {\n        updateTooltipCleanup?.()\n      }\n      if (actualGlobalCloseEvents.clickOutsideAnchor) {\n        window.removeEventListener('click', handleClickOutsideAnchors)\n      }\n      if (actualGlobalCloseEvents.escape) {\n        window.removeEventListener('keydown', handleEsc)\n      }\n      if (addHoveringTooltipListeners) {\n        tooltipRef.current?.removeEventListener('mouseover', handleMouseOverTooltip)\n        tooltipRef.current?.removeEventListener('mouseout', handleMouseOutTooltip)\n      }\n      enabledEvents.forEach(({ event, listener }) => {\n        elementRefs.forEach((ref) => {\n          ref.current?.removeEventListener(event, listener)\n        })\n      })\n    }\n    /**\n     * rendered is also a dependency to ensure anchor observers are re-registered\n     * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM\n     */\n  }, [\n    activeAnchor,\n    updateTooltipPosition,\n    rendered,\n    anchorRefs,\n    anchorsBySelect,\n    // the effect uses the `actual*Events` objects, but this should work\n    openEvents,\n    closeEvents,\n    globalCloseEvents,\n    shouldOpenOnClick,\n    delayShow,\n    delayHide,\n  ])\n\n  useEffect(() => {\n    let selector = imperativeOptions?.anchorSelect ?? anchorSelect ?? ''\n    if (!selector && id) {\n      selector = `[data-tooltip-id='${id.replace(/'/g, \"\\\\'\")}']`\n    }\n    const documentObserverCallback: MutationCallback = (mutationList) => {\n      const newAnchors: HTMLElement[] = []\n      const removedAnchors: HTMLElement[] = []\n      mutationList.forEach((mutation) => {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {\n          const newId = (mutation.target as HTMLElement).getAttribute('data-tooltip-id')\n          if (newId === id) {\n            newAnchors.push(mutation.target as HTMLElement)\n          } else if (mutation.oldValue === id) {\n            // data-tooltip-id has now been changed, so we need to remove this anchor\n            removedAnchors.push(mutation.target as HTMLElement)\n          }\n        }\n        if (mutation.type !== 'childList') {\n          return\n        }\n        if (activeAnchor) {\n          const elements = [...mutation.removedNodes].filter((node) => node.nodeType === 1)\n          if (selector) {\n            try {\n              removedAnchors.push(\n                // the element itself is an anchor\n                ...(elements.filter((element) =>\n                  (element as HTMLElement).matches(selector),\n                ) as HTMLElement[]),\n              )\n              removedAnchors.push(\n                // the element has children which are anchors\n                ...elements.flatMap(\n                  (element) =>\n                    [...(element as HTMLElement).querySelectorAll(selector)] as HTMLElement[],\n                ),\n              )\n            } catch {\n              /**\n               * invalid CSS selector.\n               * already warned on tooltip controller\n               */\n            }\n          }\n          elements.some((node) => {\n            if (node?.contains?.(activeAnchor)) {\n              setRendered(false)\n              handleShow(false)\n              setActiveAnchor(null)\n              clearTimeoutRef(tooltipShowDelayTimerRef)\n              clearTimeoutRef(tooltipHideDelayTimerRef)\n              return true\n            }\n            return false\n          })\n        }\n        if (!selector) {\n          return\n        }\n        try {\n          const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1)\n          newAnchors.push(\n            // the element itself is an anchor\n            ...(elements.filter((element) =>\n              (element as HTMLElement).matches(selector),\n            ) as HTMLElement[]),\n          )\n          newAnchors.push(\n            // the element has children which are anchors\n            ...elements.flatMap(\n              (element) =>\n                [...(element as HTMLElement).querySelectorAll(selector)] as HTMLElement[],\n            ),\n          )\n        } catch {\n          /**\n           * invalid CSS selector.\n           * already warned on tooltip controller\n           */\n        }\n      })\n      if (newAnchors.length || removedAnchors.length) {\n        setAnchorsBySelect((anchors) => [\n          ...anchors.filter((anchor) => !removedAnchors.includes(anchor)),\n          ...newAnchors,\n        ])\n      }\n    }\n    const documentObserver = new MutationObserver(documentObserverCallback)\n    // watch for anchor being removed from the DOM\n    documentObserver.observe(document.body, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['data-tooltip-id'],\n      // to track the prev value if we need to remove anchor when data-tooltip-id gets changed\n      attributeOldValue: true,\n    })\n    return () => {\n      documentObserver.disconnect()\n    }\n  }, [id, anchorSelect, imperativeOptions?.anchorSelect, activeAnchor])\n\n  useEffect(() => {\n    updateTooltipPosition()\n  }, [updateTooltipPosition])\n\n  useEffect(() => {\n    if (!contentWrapperRef?.current) {\n      return () => null\n    }\n    const contentObserver = new ResizeObserver(() => {\n      setTimeout(() => updateTooltipPosition())\n    })\n    contentObserver.observe(contentWrapperRef.current)\n    return () => {\n      contentObserver.disconnect()\n    }\n  }, [content, contentWrapperRef?.current])\n\n  useEffect(() => {\n    const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)\n    const anchors = [...anchorsBySelect, anchorById]\n    if (!activeAnchor || !anchors.includes(activeAnchor)) {\n      /**\n       * if there is no active anchor,\n       * or if the current active anchor is not amongst the allowed ones,\n       * reset it\n       */\n      setActiveAnchor(anchorsBySelect[0] ?? anchorById)\n    }\n  }, [anchorId, anchorsBySelect, activeAnchor])\n\n  useEffect(() => {\n    if (defaultIsOpen) {\n      handleShow(true)\n    }\n    return () => {\n      clearTimeoutRef(tooltipShowDelayTimerRef)\n      clearTimeoutRef(tooltipHideDelayTimerRef)\n    }\n  }, [])\n\n  useEffect(() => {\n    let selector = imperativeOptions?.anchorSelect ?? anchorSelect\n    if (!selector && id) {\n      selector = `[data-tooltip-id='${id.replace(/'/g, \"\\\\'\")}']`\n    }\n    if (!selector) {\n      return\n    }\n    try {\n      const anchors = Array.from(document.querySelectorAll<HTMLElement>(selector))\n      setAnchorsBySelect(anchors)\n    } catch {\n      // warning was already issued in the controller\n      setAnchorsBySelect([])\n    }\n  }, [id, anchorSelect, imperativeOptions?.anchorSelect])\n\n  useEffect(() => {\n    if (tooltipShowDelayTimerRef.current) {\n      /**\n       * if the delay changes while the tooltip is waiting to show,\n       * reset the timer with the new delay\n       */\n      clearTimeoutRef(tooltipShowDelayTimerRef)\n      handleShowTooltipDelayed(delayShow)\n    }\n  }, [delayShow])\n\n  const actualContent = imperativeOptions?.content ?? content\n  const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0\n\n  useImperativeHandle(forwardRef, () => ({\n    open: (options) => {\n      if (options?.anchorSelect) {\n        try {\n          document.querySelector(options.anchorSelect)\n        } catch {\n          if (!process.env.NODE_ENV || process.env.NODE_ENV !== 'production') {\n            // eslint-disable-next-line no-console\n            console.warn(`[react-tooltip] \"${options.anchorSelect}\" is not a valid CSS selector`)\n          }\n          return\n        }\n      }\n      setImperativeOptions(options ?? null)\n      if (options?.delay) {\n        handleShowTooltipDelayed(options.delay)\n      } else {\n        handleShow(true)\n      }\n    },\n    close: (options) => {\n      if (options?.delay) {\n        handleHideTooltipDelayed(options.delay)\n      } else {\n        handleShow(false)\n      }\n    },\n    activeAnchor,\n    place: computedPosition.place,\n    isOpen: Boolean(rendered && !hidden && actualContent && canShow),\n  }))\n\n  return rendered && !hidden && actualContent ? (\n    <WrapperElement\n      id={id}\n      role={role}\n      className={classNames(\n        'react-tooltip',\n        coreStyles['tooltip'],\n        styles['tooltip'],\n        styles[variant],\n        className,\n        `react-tooltip__place-${computedPosition.place}`,\n        coreStyles[canShow ? 'show' : 'closing'],\n        canShow ? 'react-tooltip__show' : 'react-tooltip__closing',\n        positionStrategy === 'fixed' && coreStyles['fixed'],\n        clickable && coreStyles['clickable'],\n      )}\n      onTransitionEnd={(event: TransitionEvent) => {\n        clearTimeoutRef(missedTransitionTimerRef)\n        if (show || event.propertyName !== 'opacity') {\n          return\n        }\n        setRendered(false)\n        setImperativeOptions(null)\n        afterHide?.()\n      }}\n      style={{\n        ...externalStyles,\n        ...computedPosition.tooltipStyles,\n        opacity: opacity !== undefined && canShow ? opacity : undefined,\n      }}\n      ref={tooltipRef}\n    >\n      {actualContent}\n      <WrapperElement\n        className={classNames(\n          'react-tooltip-arrow',\n          coreStyles['arrow'],\n          styles['arrow'],\n          classNameArrow,\n          noArrow && coreStyles['noArrow'],\n        )}\n        style={{\n          ...computedPosition.tooltipArrowStyles,\n          background: arrowColor\n            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`\n            : undefined,\n          '--rt-arrow-size': `${arrowSize}px`,\n        }}\n        ref={tooltipArrowRef}\n      />\n    </WrapperElement>\n  ) : null\n}\n\nexport default Tooltip\n","const cssTimeToMs = (time: string): number => {\n  const match = time.match(/^([\\d.]+)(ms|s)$/)\n  if (!match) {\n    return 0\n  }\n  const [, amount, unit] = match\n  return Number(amount) * (unit === 'ms' ? 1 : 1000)\n}\n\nexport default cssTimeToMs\n","/* eslint-disable react/no-danger */\nimport React from 'react'\nimport type { ITooltipContent } from './TooltipContentTypes'\n\nconst TooltipContent = ({ content }: ITooltipContent) => {\n  return <span dangerouslySetInnerHTML={{ __html: content }} />\n}\n\nexport default TooltipContent\n","import React, { useEffect, useRef, useState } from 'react'\nimport { Tooltip } from 'components/Tooltip'\nimport type {\n  EventsType,\n  PositionStrategy,\n  PlacesType,\n  VariantType,\n  WrapperType,\n  DataAttribute,\n  ITooltip,\n  ChildrenType,\n  TooltipRefProps,\n} from 'components/Tooltip/TooltipTypes'\nimport { useTooltip } from 'components/TooltipProvider'\nimport { TooltipContent } from 'components/TooltipContent'\nimport { cssSupports } from 'utils'\nimport classNames from 'classnames'\nimport type { ITooltipController } from './TooltipControllerTypes'\n\nconst TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(\n  (\n    {\n      id,\n      anchorId,\n      anchorSelect,\n      content,\n      html,\n      render,\n      className,\n      classNameArrow,\n      variant = 'dark',\n      place = 'top',\n      offset = 10,\n      wrapper = 'div',\n      children = null,\n      events = ['hover'],\n      openOnClick = false,\n      positionStrategy = 'absolute',\n      middlewares,\n      delayShow = 0,\n      delayHide = 0,\n      float = false,\n      hidden = false,\n      noArrow = false,\n      clickable = false,\n      closeOnEsc = false,\n      closeOnScroll = false,\n      closeOnResize = false,\n      openEvents,\n      closeEvents,\n      globalCloseEvents,\n      imperativeModeOnly = false,\n      style,\n      position,\n      isOpen,\n      defaultIsOpen = false,\n      disableStyleInjection = false,\n      border,\n      opacity,\n      arrowColor,\n      arrowSize,\n      setIsOpen,\n      afterShow,\n      afterHide,\n      disableTooltip,\n      role = 'tooltip',\n    }: ITooltipController,\n    ref,\n  ) => {\n    const [tooltipContent, setTooltipContent] = useState(content)\n    const [tooltipHtml, setTooltipHtml] = useState(html)\n    const [tooltipPlace, setTooltipPlace] = useState(place)\n    const [tooltipVariant, setTooltipVariant] = useState(variant)\n    const [tooltipOffset, setTooltipOffset] = useState(offset)\n    const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)\n    const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)\n    const [tooltipFloat, setTooltipFloat] = useState(float)\n    const [tooltipHidden, setTooltipHidden] = useState(hidden)\n    const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)\n    const [tooltipEvents, setTooltipEvents] = useState(events)\n    const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)\n    const [tooltipClassName, setTooltipClassName] = useState<string | null>(null)\n    const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)\n    const previousActiveAnchorRef = useRef<HTMLElement | null>(null)\n    const styleInjectionRef = useRef(disableStyleInjection)\n    /**\n     * @todo Remove this in a future version (provider/wrapper method is deprecated)\n     */\n    const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id)\n\n    const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {\n      const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {\n        if (name.startsWith('data-tooltip-')) {\n          const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute\n          acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null\n        }\n        return acc\n      }, {} as Record<DataAttribute, string | null>)\n\n      return dataAttributes\n    }\n\n    const applyAllDataAttributesFromAnchorElement = (\n      dataAttributes: Record<string, string | null>,\n    ) => {\n      const handleDataAttributes: Record<DataAttribute, (value: string | null) => void> = {\n        place: (value) => {\n          setTooltipPlace((value as PlacesType) ?? place)\n        },\n        content: (value) => {\n          setTooltipContent(value ?? content)\n        },\n        html: (value) => {\n          setTooltipHtml(value ?? html)\n        },\n        variant: (value) => {\n          setTooltipVariant((value as VariantType) ?? variant)\n        },\n        offset: (value) => {\n          setTooltipOffset(value === null ? offset : Number(value))\n        },\n        wrapper: (value) => {\n          setTooltipWrapper((value as WrapperType) ?? wrapper)\n        },\n        events: (value) => {\n          const parsed = value?.split(' ') as EventsType[]\n          setTooltipEvents(parsed ?? events)\n        },\n        'position-strategy': (value) => {\n          setTooltipPositionStrategy((value as PositionStrategy) ?? positionStrategy)\n        },\n        'delay-show': (value) => {\n          setTooltipDelayShow(value === null ? delayShow : Number(value))\n        },\n        'delay-hide': (value) => {\n          setTooltipDelayHide(value === null ? delayHide : Number(value))\n        },\n        float: (value) => {\n          setTooltipFloat(value === null ? float : value === 'true')\n        },\n        hidden: (value) => {\n          setTooltipHidden(value === null ? hidden : value === 'true')\n        },\n        'class-name': (value) => {\n          setTooltipClassName(value)\n        },\n      }\n      // reset unset data attributes to default values\n      // without this, data attributes from the last active anchor will still be used\n      Object.values(handleDataAttributes).forEach((handler) => handler(null))\n      Object.entries(dataAttributes).forEach(([key, value]) => {\n        handleDataAttributes[key as DataAttribute]?.(value)\n      })\n    }\n\n    useEffect(() => {\n      setTooltipContent(content)\n    }, [content])\n\n    useEffect(() => {\n      setTooltipHtml(html)\n    }, [html])\n\n    useEffect(() => {\n      setTooltipPlace(place)\n    }, [place])\n\n    useEffect(() => {\n      setTooltipVariant(variant)\n    }, [variant])\n\n    useEffect(() => {\n      setTooltipOffset(offset)\n    }, [offset])\n\n    useEffect(() => {\n      setTooltipDelayShow(delayShow)\n    }, [delayShow])\n\n    useEffect(() => {\n      setTooltipDelayHide(delayHide)\n    }, [delayHide])\n\n    useEffect(() => {\n      setTooltipFloat(float)\n    }, [float])\n\n    useEffect(() => {\n      setTooltipHidden(hidden)\n    }, [hidden])\n\n    useEffect(() => {\n      setTooltipPositionStrategy(positionStrategy)\n    }, [positionStrategy])\n\n    useEffect(() => {\n      if (styleInjectionRef.current === disableStyleInjection) {\n        return\n      }\n