Function Tooltip

src/components/Tooltip/index.tsx:14–129

({ children, id, anchorEl, text, delay }: Props)

}

export default function Tooltip({ children, id, anchorEl, text, delay }: Props): JSX.Element {
  const [open, setOpen] = useState(false)
  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
  const [container, setContainer] = useState<Element | null>(null)
  const { styles: popperStyles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
      {
        name: 'offset',
        options: {
          offset: [0, 8],
        },
      },
    ],
  })

  const timeout = useRef<number | null>(null)
  const tooltipId = `${id}_tooltip`

  useEffect(() => {
    if (anchorEl) {
      if (typeof anchorEl === 'string') {
        setContainer(document.querySelector(anchorEl))
      } else {
        setContainer(anchorEl)
      }
    } else {
      setContainer(document.body)
    }
  }, [container, anchorEl])

  useEffect(() => {
    const showEvents = ['mouseenter', 'focus']
    const hideEvents = ['mouseleave', 'blur']

    const handleOpen = () => {
      // There is no point in displaying an empty tooltip.
      if (text === '') {
        return
      }

      // Remove the title ahead of time to avoid displaying
      // two tooltips at the same time (native + this one).
      referenceElement?.removeAttribute('title')

      timeout.current = window.setTimeout(() => {
        setOpen(true)
      }, delay || 300)
    }

    const handleClose = () => {