MCPcopy Create free account
hub / github.com/adobe/react-spectrum / TooltipInner

Function TooltipInner

packages/react-aria-components/src/Tooltip.tsx:188–251  ·  view source on GitHub ↗
(
  props: TooltipProps & {isExiting: boolean; tooltipRef: RefObject<HTMLDivElement | null>}
)

Source from the content-addressed store, hash-verified

186});
187
188function TooltipInner(
189 props: TooltipProps & {isExiting: boolean; tooltipRef: RefObject<HTMLDivElement | null>}
190) {
191 let state = useContext(TooltipTriggerStateContext)!;
192 let arrowRef = useRef<HTMLDivElement>(null);
193
194 let {overlayProps, arrowProps, placement, triggerAnchorPoint} = useOverlayPosition({
195 placement: props.placement || 'top',
196 targetRef: props.triggerRef!,
197 overlayRef: props.tooltipRef,
198 arrowRef,
199 offset: props.offset,
200 crossOffset: props.crossOffset,
201 isOpen: state.isOpen,
202 arrowBoundaryOffset: props.arrowBoundaryOffset,
203 shouldFlip: props.shouldFlip,
204 containerPadding: props.containerPadding,
205 onClose: () => state.close(true)
206 });
207
208 // Skip the automatic entry animation when opening instantly (e.g. swapping between tooltips
209 // during warmup). An explicitly provided isEntering prop still takes precedence.
210 let enterAnimation = useEnterAnimation(props.tooltipRef, !!placement);
211 let isEntering = props.isEntering || (!state.shouldSkipAnimation && enterAnimation) || false;
212 let renderProps = useRenderProps({
213 ...props,
214 defaultClassName: 'react-aria-Tooltip',
215 values: {
216 placement,
217 isEntering,
218 isExiting: props.isExiting,
219 state
220 }
221 });
222
223 props = mergeProps(props, overlayProps);
224 let {tooltipProps} = useTooltip(props, state);
225
226 let DOMProps = filterDOMProps(props, {global: true});
227
228 // oxlint-disable react/react-compiler
229 return (
230 <dom.div
231 {...mergeProps(DOMProps, renderProps, tooltipProps)}
232 ref={props.tooltipRef}
233 style={
234 {
235 ...overlayProps.style,
236 '--trigger-anchor-point': triggerAnchorPoint
237 ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px`
238 : undefined,
239 ...renderProps.style
240 } as CSSProperties
241 }
242 data-placement={placement ?? undefined}
243 data-entering={isEntering || undefined}
244 data-exiting={props.isExiting || undefined}>
245 <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>

Callers

nothing calls this directly

Calls 7

useOverlayPositionFunction · 0.90
useEnterAnimationFunction · 0.90
useRenderPropsFunction · 0.90
mergePropsFunction · 0.90
filterDOMPropsFunction · 0.90
useTooltipFunction · 0.85
closeMethod · 0.65

Tested by

no test coverage detected