How to use Base UI Tooltip with non-DOM triggers?

[Vinayaka-Hebbar]

Hi! I’m trying to use Base UI Tooltip with Konva (canvas library), but Konva shapes are not real DOM elements, so the usual pattern doesn’t work.

Right now I’m using the tooltip handle API, which works, but I want to confirm whether this is the intended approach or if there's a better workaround.

What I’m doing now

const handle = Tooltip.createHandle<TooltipInfo>();

On Konva mouseenter:

 handle.store.update({
      activeTriggerId: id,
      open: true,
      instantType: 'click',
      payload: {
        date: e.target.attrs['tick-date'],
        time: e.target.attrs['tick-time'],
        tick: e.target.attrs['tick-text'],
        position: {
          x: e.evt.clientX - 100,
          y: e.evt.clientY + 10,
        },
      },
    });

On mouseleave:

handle.store.update({
  activeTriggerId: null,
  instantType: 'dismiss',
  stickIfOpen: false,
  open: false,
  payload: undefined,
});

then

<Tooltip.Root handle={handle}>{({ payload }) => payload && <TooltipContent payload={payload} />}</Tooltip.Root>

function TooltipContent({ payload }: TooltipContentProps) {
  const { position } = payload;

  return (
    <Tooltip.Portal>
      <div
        className="canvas-tooltip"
        style={{
          top: position.y,
          left: position.x,
        }}>
        // tooltip content
      </div>
    </Tooltip.Portal>
  );
}

What I want to know

Is the tooltip handle the recommended pattern when dealing with virtual elements like Konva nodes?