[Tooltip] Lazy floating UI/don't execute any floating UI logic until mouse over on uncontrolled variant.

[sunwrobert]

Feature request

Summary

Our website uses a ton of Tooltips, and using the profiler, seems that a decent amount of time is spent hitting floating-ui code even if the user hasn't interacted with the site or hovered anything. I'm wondering if it makes sense for the tooltip to have some prop that defers any floating UI logic until interaction? Of course, I could do this manually with a Controlled Tooltip but wondering if this would be beneficial as part of the library. Thanks!

Examples in other libraries

Motivation

[atomiks]

Hi @sunwrobert the expensive anchor positioning work isn't active until a tooltip is hovered/mounted to the DOM, so that shouldn't be a concern. There's other stuff executed in the root on mount before hovering (e.g. effects), and maybe work related to FloatingDelayGroup logic used by Tooltip.Provider – can you describe what you're seeing in the profiler exactly?

[sunwrobert]

This is what I see right when reloading the page with profile enabled and this is the gist of our Tooltip code.

<TooltipPrimitive.Root
      defaultOpen={defaultOpen}
      delay={delay}
      hoverable={hoverable}
      open={resolvedOpenState}
      trackCursorAxis={attachToCursor ? "both" : undefined}
      onOpenChange={handleOnOpenChange}
    >
      <TooltipPrimitive.Trigger
        render={children}
        onPointerLeave={() => handleOnOpenChange(false)}
      />
      <TooltipPrimitive.Portal>
        <TooltipPrimitive.Positioner
          align={align}
          alignOffset={alignOffset}
          anchor={anchor}
          className={classNames(
            "z-tooltip",
            disablePointerEvents ? "pointer-events-none" : undefined,
          )}
          side={side}
          sideOffset={sideOffset}
        >
          <TooltipPrimitive.Popup
            className={classNames(tooltipClassNames, className)}
            ref={ref}
            role="tooltip"
            style={style}
          >
            {content}
          </TooltipPrimitive.Popup>
        </TooltipPrimitive.Positioner>
      </TooltipPrimitive.Portal>
    </TooltipPrimitive.Root>

[atomiks]

Hmm, related to clearTimeout? There was actually a perf fix for that in the latest @floating-ui/react version: floating-ui/floating-ui#3233

If you install the latest version to update your lockfile (them remove), it will pull in those changes

pnpm add @floating-ui/react@latest
pnpm remove @floating-ui/react

[sunwrobert]

Looks promising, will try it out ty

[sunwrobert]

Hey @atomiks, just updated to the latest version and I don't see the floating-ui code being hit anymore which is pretty nice. Still noticing this hook being called though from base-ui itself. This happens after page load (haven't interacted with any elements). Is this intentional/unavoidable?

[atomiks]

A bunch of hooks are called in the root where it's unavoidable, that's one of them. That particular hook should be cheap though - is it executing the returned function on mount and causing an issue?

[sunwrobert]

Yeah seems to be executing on mount