useTooltip.tsx

import React from 'react'
import { Overlay, Popover } from 'react-bootstrap'

function useTooltip() {
  const mountNodeRef = React.useRef<HTMLDivElement>()

  React.useEffect(() => {
    const mountNode = document.createElement('div')

    mountNodeRef.current = mountNode

    return () => {
      if (document.body.contains(mountNode)) {
        document.body.removeChild(mountNode)
      }
    }
  }, [])

  const openPopover = (component: React.SFCElement<any>) => {
    if (!mountNodeRef.current) {
      return
    }

    if (!document.body.contains(mountNodeRef.current)) {
      mountNodeRef.current.setAttribute('data-testid', 'popover-anchor-element')
      document.body.appendChild(mountNodeRef.current)
    }

    ReactDOM.render(component, mountNodeRef.current)
  }

  const closePopover = () => {
    if (mountNodeRef.current) {
      ReactDOM.unmountComponentAtNode(mountNodeRef.current)
    }
  }

  return { openPopover, closePopover }
}

function App() {
  const { openPopover, closePopover } = useTooltip()

  return (
    <div
      onMouseEnter={e => {
        const popoverId = 'my-popover'
        const targetEl = e.currentTarget

        openPopover(
          <Overlay
            placement="bottom"
            show
            target={() => targetEl}
          >
            <Popover id={popoverId}>Tooltip contents</Popover>
          </Overlay>
        )
      }}
      onMouseLeave={closePopover}
    />
  )
}