Function TooltipInner

packages/react-aria-components/src/Tooltip.tsx:185–243

(
  props: TooltipProps & {isExiting: boolean; tooltipRef: RefObject<HTMLDivElement | null>}
)

});

function TooltipInner(
  props: TooltipProps & {isExiting: boolean; tooltipRef: RefObject<HTMLDivElement | null>}
) {
  let state = useContext(TooltipTriggerStateContext)!;
  let arrowRef = useRef<HTMLDivElement>(null);

  let {overlayProps, arrowProps, placement, triggerAnchorPoint} = useOverlayPosition({
    placement: props.placement || 'top',
    targetRef: props.triggerRef!,
    overlayRef: props.tooltipRef,
    arrowRef,
    offset: props.offset,
    crossOffset: props.crossOffset,
    isOpen: state.isOpen,
    arrowBoundaryOffset: props.arrowBoundaryOffset,
    shouldFlip: props.shouldFlip,
    containerPadding: props.containerPadding,
    onClose: () => state.close(true)
  });

  let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;
  let renderProps = useRenderProps({
    ...props,
    defaultClassName: 'react-aria-Tooltip',
    values: {
      placement,
      isEntering,
      isExiting: props.isExiting,
      state
    }
  });

  props = mergeProps(props, overlayProps);
  let {tooltipProps} = useTooltip(props, state);

  let DOMProps = filterDOMProps(props, {global: true});

  return (
    <dom.div
      {...mergeProps(DOMProps, renderProps, tooltipProps)}
      ref={props.tooltipRef}
      style={
        {
          ...overlayProps.style,
          '--trigger-anchor-point': triggerAnchorPoint
            ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`
            : undefined,
          ...renderProps.style
        } as CSSProperties
      }
      data-placement={placement ?? undefined}
      data-entering={isEntering || undefined}
      data-exiting={props.isExiting || undefined}>
      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
        {renderProps.children}
      </OverlayArrowContext.Provider>
    </dom.div>
  );