Portal Root

Render the tooltip into a custom DOM container with portalRoot.

This is useful when the tooltip needs to escape local clipping, stacking, or layout constraints.

Basic usage

import React, { useEffect, useRef, useState } from 'react'
import { Tooltip } from 'react-tooltip'

function Example() {
  const portalContainerRef = useRef(null)
  const [portalRoot, setPortalRoot] = useState(null)

  useEffect(() => {
    setPortalRoot(portalContainerRef.current)
  }, [])

  return (
    <>
      <button data-tooltip-id="my-tooltip">Hover me</button>
      <div ref={portalContainerRef} />
      <Tooltip
        id="my-tooltip"
        content="Rendered through portalRoot"
        portalRoot={portalRoot}
        positionStrategy="fixed"
      />
    </>
  )
}

This panel clips its content. The tooltip is rendered into the container below instead of staying inside this box.

◕‿‿◕

Tooltip portal container

Notes

• portalRoot is optional. Without it, the tooltip renders inline as usual.
• positionStrategy="fixed" is the safest default when rendering into document.body or another external container.
• The anchor element stays in place. Only the tooltip node is moved.