Tooltip: Add containerRef to Portal

[gfohl]

Add optional containerRef to Portal inside Tooltip.

Before

In full-screen, the reach-portal element existed but was not visible:

After

By adding the target container to the Portal, the tooltip is now visible in full-screen

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code (Compile and run).
• Add or edit tests to reflect the change (Run with yarn test).
• Add or edit Storybook examples to reflect the change (Run with yarn start).
• Ensure formatting is consistent with the project's Prettier configuration.
• Add documentation to support any new features.

This pull request:

• Creates a new package
• Fixes a bug in an existing package
• Adds additional features/functionality to an existing package
• Updates documentation or example code
• Other

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7bb8abd:

Sandbox	Source
reach-ui-template	Configuration

[zpeterson]

This fixes an issue we're having where tooltips aren't visible when our video player is in full-screen mode. Would really appreciate having this change available!

[zpeterson]

Hi! Would love to get a review on this so we can ship soon!

[indiesquidge]

We understand why this change might be useful and necessary, but this library does not currently have full-time support, and we would like to consider the API a bit more before merging.

Keep in mind that you can always patch this behavior in the meantime in your own project with https://www.npmjs.com/package/patch-package

[indiesquidge]

An alternative to consider is updating Reach to include TooltipContent as a named export. (I'm not actually sure why this isn't done already considering we do export TooltipContentProps).

- export { MOUSE_REST_TIMEOUT, LEAVE_TIMEOUT, Tooltip, TooltipPopup, useTooltip };
+ export { MOUSE_REST_TIMEOUT, LEAVE_TIMEOUT, Tooltip, TooltipPopup, useTooltip, TooltipContent };

Doing this, we'd open up access to adjust the portal directly in a developer's custom tooltip however desired without adjusting the Tooltip's API.

Following the lead of the tooltip demos in the documentation using the lower level API, you could create something like this:

import * as React from "react";
import { useTooltip, TooltipContent } from "@reach/tooltip";
import type { TooltipProps } from "@reach/tooltip";
import Portal from "@reach/portal";
import "@reach/tooltip/styles.css";

interface CustomTooltipProps extends TooltipProps {
  containerRef?: React.RefObject<Node>;
}

function CustomTooltip({
  children,
  containerRef,
  ...props
}: CustomTooltipProps) {
  const [trigger, tooltip] = useTooltip();

  return (
    <React.Fragment>
      {React.cloneElement(children as any, trigger)}
      {tooltip.isVisible && (
        <Portal containerRef={containerRef}>
          <TooltipContent {...tooltip} {...props} />
        </Portal>
      )}
    </React.Fragment>
  );
}

[Warsaken]

I would like to see this added also to the "dialog" and "popover" (besides "tooltip") libraries in reach.

It was actually the original intent for containerRef when I introduced it in a previous PR (#756). I just left it separated to make reviewing the first PR easier.

[zpeterson]

Hey @indiesquidge! I wanted to check back in to determine the best path forward. It sounds like @Warsaken agrees with this update. Would it be possible to have this PR considered for approval?

[ccveer]

@indiesquidge, is there an eta for when this PR will get shipped? Would be a great update.

[chaance]

@gfohl Do you mind rebasing against the up-to-date branch? I've updated the repo structure a bit and moved examples into a separate playground package.

[chaance]

On second thought, I'm going to close this for the same reason I closed #901 (comment). Instead of a prop, I'd encourage composition. We already provide low-level access to the tooltip internals via useTooltip and Portal so you can create your own abstraction.

[chaance]

I have created an example of a custom tooltip implementation with a containerRef prop. https://github.com/reach/reach-ui/blob/dev/playground/stories/tooltip/custom-tooltip.example.tsx