@@ -21,15 +21,17 @@ export function TooltipContent<StyledTooltipContentProps>(
2121 shouldOverlapWithTrigger,
2222 } = value ;
2323 const overlayRef = React . useRef ( null ) ;
24- const { overlayProps } = useOverlayPosition ( {
25- placement,
26- targetRef,
27- overlayRef,
28- crossOffset,
29- offset,
30- shouldOverlapWithTrigger,
31- shouldFlip,
32- } ) ;
24+ const { overlayProps, placement : calculatedPlacement } = useOverlayPosition (
25+ {
26+ placement,
27+ targetRef,
28+ overlayRef,
29+ crossOffset,
30+ offset,
31+ shouldOverlapWithTrigger,
32+ shouldFlip,
33+ }
34+ ) ;
3335
3436 if ( Object . keys ( overlayProps . style ) . length === 0 ) {
3537 overlayProps . style = {
@@ -39,14 +41,52 @@ export function TooltipContent<StyledTooltipContentProps>(
3941 }
4042 const mergedRef = mergeRefs ( [ ref , overlayRef ] ) ;
4143
44+ const initialAnimatedStyles = {
45+ opacity : 0 ,
46+ scale : 0.9 ,
47+ y :
48+ calculatedPlacement === 'top'
49+ ? 6
50+ : calculatedPlacement === 'bottom'
51+ ? - 6
52+ : 0 ,
53+ x :
54+ calculatedPlacement === 'right'
55+ ? - 6
56+ : calculatedPlacement === 'left'
57+ ? 6
58+ : 0 ,
59+ } ;
60+
61+ const animatedStyles = {
62+ opacity : 1 ,
63+ y : 0 ,
64+ scale : 1 ,
65+ x : 0 ,
66+ } ;
67+
68+ const exitAnimatedStyles = {
69+ opacity : 0 ,
70+ x : 0 ,
71+ y : 0 ,
72+ } ;
73+
4274 return (
4375 < OverlayAnimatePresence
4476 visible = { isOpen }
4577 AnimatePresence = { AnimatePresence }
4678 >
4779 < StyledTooltipContent
80+ initial = { initialAnimatedStyles }
81+ animate = { animatedStyles }
82+ exit = { exitAnimatedStyles }
83+ transition = { {
84+ type : 'timing' ,
85+ duration : 100 ,
86+ } }
4887 { ...props }
4988 ref = { mergedRef }
89+ key = { placement + calculatedPlacement }
5090 role = { Platform . OS === 'web' ? 'tooltip' : undefined }
5191 style = { [ overlayProps . style , { position : 'absolute' } , style ] }
5292 >
0 commit comments