Solution

You will keep a getBoundingClientRect measurement in React state and refresh it on every signal that can move or resize the element: the element's own size changes, and — the part that is easy to miss — scrolling and window resizes.

The problem, in plain English

A tooltip has to sit right on top of its trigger. To place it you need the trigger's box: how wide and tall it is, and where its top-left corner is on the screen. getBoundingClientRect hands you all of that in one call. The catch is that the answer goes stale the instant anything scrolls — the box you measured a moment ago is now in a different place on screen, and the tooltip drifts away from its trigger.

The mental model

Here is the one fact that drives the whole question: getBoundingClientRect returns coordinates relative to the viewport, not the document. Picture the page as a long strip of paper and the viewport as a window you slide up and down over it. An element is pinned to the paper — it never moves. But top is measured from the top edge of the window, so scrolling the window down makes the element's top shrink even though the element sat perfectly still. Width and height belong to the box itself, so they do not care where the window is. Position and size answer to different things.

A first attempt

Reach for the tool you already know: a ResizeObserver. Measure once on mount, then let the observer re-measure whenever the element changes size.

const { useState, useLayoutEffect } = require('react');

function useElementBounding(ref) {
  const [bounds, setBounds] = useState({
    width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0,
  });

  useLayoutEffect(() => {
    const el = ref.current;
    const update = () => {
      const r = el.getBoundingClientRect();
      setBounds({
        width: r.width, height: r.height,
        top: r.top, left: r.left, right: r.right, bottom: r.bottom,
        x: r.x, y: r.y,
      });
    };
    update();                       // measure on mount
    const ro = new ResizeObserver(update);
    ro.observe(el);                 // re-measure when the box resizes
    return () => ro.disconnect();
  }, [ref]);

  return bounds;
}

Grow or shrink the element and the numbers update perfectly, so it looks finished. Then scroll the page and the tooltip slides off its trigger. A ResizeObserver watches the element's size — it fires when the box grows or shrinks, and never when the page scrolls. Nothing is listening for scroll, so top and left keep reporting the position from mount. Size stays right; position rots.

The working solution

const { useState, useLayoutEffect } = require('react');

const INITIAL = {
  width: 0,
  height: 0,
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  x: 0,
  y: 0,
};

function useElementBounding(ref) {
  const [bounds, setBounds] = useState(INITIAL);

  useLayoutEffect(() => {
    const el = ref.current;

    const update = () => {
      const node = ref.current;
      if (!node) return;
      const r = node.getBoundingClientRect();
      setBounds({
        width: r.width,
        height: r.height,
        top: r.top,
        left: r.left,
        right: r.right,
        bottom: r.bottom,
        x: r.x,
        y: r.y,
      });
    };

    update(); // measure once on mount

    // Content-driven size changes: fires when the element's own box resizes.
    const ro = new ResizeObserver(update);
    if (el) ro.observe(el);

    // Position changes: getBoundingClientRect is viewport-relative, so any
    // scroll moves it. capture:true is REQUIRED — scroll does not bubble, but it
    // DOES travel the capture phase, so a window capture listener catches scroll
    // from any scrollable ancestor. passive:true says we never preventDefault.
    window.addEventListener('scroll', update, { capture: true, passive: true });
    window.addEventListener('resize', update, { passive: true });

    return () => {
      ro.disconnect();
      window.removeEventListener('scroll', update, { capture: true });
      window.removeEventListener('resize', update);
    };
  }, [ref]);

  return bounds;
}

module.exports = { useElementBounding };

The ResizeObserver still handles size. The new part is two window listeners that re-run the exact same measurement on scroll and on resize. The detail that is easy to get wrong is capture: true on the scroll listener: a scroll event does not bubble, so a plain listener on window would never hear an inner scrollable container scroll. In the capture phase the event travels down from window toward the target, so a capturing listener on window catches scroll from any ancestor. passive: true promises we will not call preventDefault, which lets the browser scroll smoothly without waiting on our handler.

Wiring it up, and tearing it down

Everything is set up in one layout effect and undone in its cleanup. On mount you take the first measurement, start the observer, and add both window listeners. On unmount you must reverse all three — disconnect the observer and remove both listeners — passing the same function reference you added, so the browser can find and detach it. Skip the cleanup and every mount stacks another scroll handler on window; after a few navigations you are re-measuring dead elements on every scroll frame.

Walking through one call

Say the trigger sits 500px down the page inside a scrollable panel, and the panel has not been scrolled yet. On mount the effect runs:

1. Measure. getBoundingClientRect reports top: 500, and we store the full rect in state. The tooltip renders at top: 500.
2. Observe and listen. We observe the element and add the capturing scroll and resize listeners on window.
3. The user scrolls the panel down 350px. The panel fires a scroll event. It does not bubble, but our capturing window listener catches it on the way down.
4. Re-measure. update runs again. getBoundingClientRect now reports top: 150 — that is 500 minus the 350px of scroll. State updates, the component re-renders, and the tooltip follows the trigger to its new spot.
5. Unmount. Cleanup disconnects the observer and removes both listeners, so nothing is left measuring a gone element.

Gotchas

• ResizeObserver only — the trap this question is built on. It keeps width and height honest but never fires on scroll, so position freezes at its mount value. You need scroll and resize listeners on top of it.
• Forgetting capture: true — without it, a plain window scroll listener misses scrolling inside any nested scroll container, because scroll does not bubble. Capture phase is the only way window hears a descendant's scroll.
• Removing a different function than you added — removeEventListener matches by reference. If update is redefined every render and you add one copy but remove another, the old listener lingers forever. Define it once inside the effect (or memoize it) and add and remove that same reference.
• useEffect instead of useLayoutEffect — the element paints at its old or zero position for one frame before the measurement lands, so a freshly mounted tooltip visibly jumps into place. useLayoutEffect measures before the browser paints.
• Spreading the rect — { ...el.getBoundingClientRect() } gives you an empty object in most browsers, because a DOMRect's properties live on its prototype, not as own enumerable keys. Copy the fields out by name.

Going further

• Content mutations. A ResizeObserver catches size changes but not a reposition caused by a sibling's content changing or a class/style swap. VueUse also wires a MutationObserver with attributeFilter: ['style', 'class'] to re-measure on those. Add one if your layout can shift without a scroll, resize, or size change.
• Throttle to a frame. Scroll fires a lot, and each getBoundingClientRect forces a synchronous layout. On a heavy page, coalesce updates into one requestAnimationFrame per frame instead of measuring on every scroll event.
• Return the ref instead of taking one. Some designs hand the ref back — const [ref, rect] = useElementBounding() — so the caller just spreads it onto an element. Same machinery; only the wiring at the call site changes.
• Reset on unmount. VueUse can zero the values when the element goes away, so stale coordinates cannot linger in a parent that outlives the measured node.