Skip to content

[FEAT REQ] Expose place context for use with multiple anchors #868

@tonyketcham

Description

@tonyketcham

Is your feature request related to a problem? Please describe.
I have customized the Tooltip arrow with a border and CSS mask which necessitates that the arrow is conditionally rotated based on the place that the arrow is rendered.

I tried adding a thin wrapper around the <TooltipProvider/> which stores + allows context consumers to set the place. Then in a component containing a customized TooltipWrapper, I attempt to set the place when it changes. This does not work, as many TooltipWrappers are mounted simultaneously with listeners for onMouseover which triggers the global tooltip instance to anchor onto the element within the hovered TooltipWrapper. So I then need to verbosely add state management to set the placement only of the currently hovered TooltipWrapper instance. This is essentially juggling alongside the internal state management of this library, which feels a bit hacky for my purposes.

Describe the solution you'd like
I would like to be able to use the internal useTooltip(), publicly exported in the dist, with the addition of activePlace to the TooltipContextData. Then I would easily be able to apply conditional Tailwind styles to the global tooltip instance based on:

/**
 * Global tooltip component that is rendered once at the root of the app, with dynamic content rendered into it by
 * `TooltipWrapper` instances.
 */
export const TooltipGlobal = function () {

  const { activePlace } = useTooltip();

  const arrowTransform = useMemo(() => {
    switch (activePlace) {
      case 'top':
        return 'rotate-[225deg]';

      case 'bottom':
        return 'rotate-45';

      case 'left':
        return '-rotate-45';

      case 'right':
        return 'rotate-[135deg]';

      default:
        throw new Error(`unhandled "activePlace" value: ${activePlace}`);
    }
  }, [placement]);

  return (
    <Tooltip
      classNameArrow={classNames(

        // bunch of custom styling here ...

        arrowTransform,
      )}
    />
  );
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions