fix: tooltip positioning for components using position absolute

Author: pac-guerreiro

src/components/Appbar/AppbarHeader.tsx

@@ -12,6 +12,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useInternalTheme } from '../../core/theming';
+import useInternalNavigation from '../../react-navigation/useInternalNavigation';
 import shadow from '../../styles/shadow';
 import type { ThemeProp } from '../../types';
 import { Appbar } from './Appbar';
@@ -117,6 +118,7 @@ const AppbarHeader = ({
   theme: themeOverrides,
   ...rest
 }: Props) => {
+  const navigation = useInternalNavigation();
   const theme = useInternalTheme(themeOverrides);
   const { isV3 } = theme;
 
@@ -134,6 +136,10 @@ const AppbarHeader = ({
     zIndex?: number;
   };
 
+  React.useEffect(() => {
+    navigation.setParams({ headerHeight: height });
+  }, [height, navigation]);
+
   const backgroundColor = getAppbarColor(
     theme,
     elevation,

src/components/Tooltip/Tooltip.tsx

@@ -5,11 +5,14 @@ import {
   LayoutChangeEvent,
   StyleSheet,
   Platform,
+  Pressable,
+  ViewStyle,
 } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
 import { useInternalTheme } from '../../core/theming';
+import useAppBarHeight from '../../react-navigation/useAppBarHeight';
 import { addEventListener } from '../../utils/addEventListener';
 import Portal from '../Portal/Portal';
 import Text from '../Typography/Text';
@@ -71,6 +74,7 @@ const Tooltip = ({
   theme: themeOverrides,
   ...rest
 }: Props) => {
+  const headerHeight = useAppBarHeight();
   const theme = useInternalTheme(themeOverrides);
   const [visible, setVisible] = React.useState(false);
 
@@ -182,7 +186,11 @@ const Tooltip = ({
                 backgroundColor: theme.isV3
                   ? theme.colors.onSurface
                   : theme.colors.tooltip,
-                ...getTooltipPosition(measurement as Measurement),
+                ...getTooltipPosition(
+                  measurement as Measurement,
+                  children,
+                  headerHeight
+                ),
                 borderRadius: theme.roundness,
                 ...(measurement.measured ? styles.visible : styles.hidden),
               },

src/components/Tooltip/utils.ts

@@ -1,4 +1,4 @@
-import { Dimensions, LayoutRectangle } from 'react-native';
+import { Dimensions, LayoutRectangle, ViewStyle } from 'react-native';
 
 type ChildrenMeasurement = {
   width: number;
@@ -40,18 +40,26 @@ const overflowRight = (center: number, tooltipWidth: number): boolean => {
 const overflowBottom = (
   childrenY: number,
   childrenHeight: number,
-  tooltipHeight: number
+  tooltipHeight: number,
+  headerHeight: number = 0
 ): boolean => {
   const { height: layoutHeight } = Dimensions.get('window');
 
-  return childrenY + childrenHeight + tooltipHeight > layoutHeight;
+  return (
+    childrenY + childrenHeight + tooltipHeight > layoutHeight - headerHeight
+  );
 };
 
 const getTooltipXPosition = (
   { pageX: childrenX, width: childrenWidth }: ChildrenMeasurement,
   { width: tooltipWidth }: TooltipLayout
 ): number => {
-  const center = childrenX + (childrenWidth - tooltipWidth) / 2;
+  // when the children use position absolute the childrenWidth is measured as 0,
+  // so it's best to anchor the tooltip at the start of the children
+  const center =
+    childrenWidth > 0
+      ? childrenX + (childrenWidth - tooltipWidth) / 2
+      : childrenX;
 
   if (overflowLeft(center)) return childrenX;
 
@@ -63,23 +71,64 @@ const getTooltipXPosition = (
 
 const getTooltipYPosition = (
   { pageY: childrenY, height: childrenHeight }: ChildrenMeasurement,
-  { height: tooltipHeight }: TooltipLayout
+  { height: tooltipHeight }: TooltipLayout,
+  headerHeight: number = 0
 ): number => {
-  if (overflowBottom(childrenY, childrenHeight, tooltipHeight))
+  if (overflowBottom(childrenY, childrenHeight, tooltipHeight, headerHeight))
     return childrenY - tooltipHeight;
 
   return childrenY + childrenHeight;
 };
 
-export const getTooltipPosition = ({
-  children,
-  tooltip,
-  measured,
-}: Measurement): {} | { left: number; top: number } => {
+const getChildrenMeasures = (
+  style: ViewStyle | Array<ViewStyle>,
+  measures: ChildrenMeasurement
+): ChildrenMeasurement => {
+  const { position, top, bottom, left, right } = Array.isArray(style)
+    ? style.reduce((acc, current) => ({ ...acc, ...current }))
+    : style;
+
+  if (position === 'absolute') {
+    let pageX = 0;
+    let pageY = measures.pageY;
+    let height = 0;
+    let width = 0;
+    if (typeof left === 'number') {
+      pageX = left;
+      width = 0;
+    }
+    if (typeof right === 'number') {
+      pageX = measures.width - right;
+      width = 0;
+    }
+    if (typeof top === 'number') {
+      pageY = pageY + top;
+    }
+    if (typeof bottom === 'number') {
+      pageY = pageY - bottom;
+    }
+
+    return { pageX, pageY, width, height };
+  }
+
+  return measures;
+};
+
+export const getTooltipPosition = (
+  { children, tooltip, measured }: Measurement,
+  component: React.ReactElement<{
+    style: ViewStyle | Array<ViewStyle> | undefined | null;
+  }>,
+  headerHeight: number = 0
+): {} | { left: number; top: number } => {
   if (!measured) return {};
+  let measures = children;
+  if (component.props.style) {
+    measures = getChildrenMeasures(component.props.style, children);
+  }
 
   return {
-    left: getTooltipXPosition(children, tooltip),
-    top: getTooltipYPosition(children, tooltip),
+    left: getTooltipXPosition(measures, tooltip),
+    top: getTooltipYPosition(measures, tooltip, headerHeight),
   };
 };

src/react-navigation/types.tsx

@@ -116,3 +116,7 @@ export type MaterialBottomTabNavigationConfig = Partial<
     | 'getTestID'
   >
 >;
+
+export type NavigationParams = {
+  params?: { headerHeight?: number };
+};

src/react-navigation/useAppBarHeight.tsx

@@ -0,0 +1,16 @@
+import { useRoute, RouteProp } from '@react-navigation/native';
+
+import type { NavigationParams } from './types';
+
+/**
+ * Gets app bar height for current screen
+ *
+ * @returns app bar height of parent screen
+ */
+const useAppBarHeight = (): number => {
+  const { params } = useRoute<RouteProp<NavigationParams>>();
+
+  return params?.headerHeight ?? 0;
+};
+
+export default useAppBarHeight;

src/react-navigation/useInternalNavigation.tsx

@@ -0,0 +1,13 @@
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+
+import type { NavigationParams } from './types';
+
+/**
+ * Get properly typed navigation object from useNavigation hook
+ *
+ * @returns navigation object
+ */
+const useInternalNavigation = (): NavigationProp<NavigationParams> =>
+  useNavigation<NavigationProp<NavigationParams>>();
+
+export default useInternalNavigation;