fix: Improve visibility of tooltips

src/components/Tooltip/BaseGenericTooltip/index.native.tsx

@@ -37,6 +37,7 @@ function BaseGenericTooltip({
     shouldUseOverlay = false,
     onHideTooltip = () => {},
     shouldTeleportPortalToModalLayer = false,
+    isEducationTooltip = false,
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
@@ -69,6 +70,7 @@ function BaseGenericTooltip({
                 anchorAlignment,
                 wrapperStyle,
                 shouldAddHorizontalPadding: false,
+                isEducationTooltip,
             }),
         [
             StyleUtils,
@@ -85,6 +87,7 @@ function BaseGenericTooltip({
             shouldForceRenderingBelow,
             anchorAlignment,
             wrapperStyle,
+            isEducationTooltip,
         ],
     );
 

src/components/Tooltip/BaseGenericTooltip/index.tsx

@@ -38,6 +38,7 @@ function BaseGenericTooltip({
     },
     shouldUseOverlay = false,
     onHideTooltip = () => {},
+    isEducationTooltip = false,
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
@@ -83,6 +84,7 @@ function BaseGenericTooltip({
                 shouldForceRenderingBelow,
                 anchorAlignment,
                 wrapperStyle,
+                isEducationTooltip,
             }),
         [
             StyleUtils,
@@ -99,6 +101,7 @@ function BaseGenericTooltip({
             shouldForceRenderingBelow,
             anchorAlignment,
             wrapperStyle,
+            isEducationTooltip,
         ],
     );
 

src/components/Tooltip/BaseGenericTooltip/types.ts

@@ -33,6 +33,9 @@ type BaseGenericTooltipProps = {
 
     /** Whether the tooltip should teleport to the modal layer */
     shouldTeleportPortalToModalLayer?: boolean;
+
+    /** Whether it is education tooltip */
+    isEducationTooltip?: boolean;
 } & Pick<SharedTooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'anchorAlignment' | 'shouldUseOverlay'>;
 
 // eslint-disable-next-line import/prefer-default-export

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -59,6 +59,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
         <GenericTooltip
             shouldForceAnimate
             shouldRender={shouldRender}
+            isEducationTooltip
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >

src/components/Tooltip/GenericTooltip.tsx

@@ -36,6 +36,7 @@ function GenericTooltip({
     shouldUseOverlay: shouldUseOverlayProp = false,
     shouldTeleportPortalToModalLayer,
     shouldRender = true,
+    isEducationTooltip = false,
 }: GenericTooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -163,6 +164,7 @@ function GenericTooltip({
         <>
             {shouldRender && isRendered && (
                 <BaseGenericTooltip
+                    isEducationTooltip={isEducationTooltip}
                     // eslint-disable-next-line react-compiler/react-compiler
                     animation={animation}
                     windowWidth={windowWidth}

src/components/Tooltip/types.ts

@@ -66,6 +66,9 @@ type GenericTooltipProps = SharedTooltipProps & {
 
     /** Whether to ignore TooltipSense activity and always triger animation */
     shouldForceAnimate?: boolean;
+
+    /** Whether it is education tooltip */
+    isEducationTooltip?: boolean;
 };
 
 type TooltipProps = ChildrenProps &

src/styles/index.ts

@@ -4013,7 +4013,7 @@ const styles = (theme: ThemeColors) =>
 
         productTrainingTooltipText: {
             fontSize: variables.fontSizeLabel,
-            color: theme.textDark,
+            color: theme.textReversed,
             lineHeight: variables.lineHeightLarge,
         },
 

src/styles/theme/themes/dark.ts

@@ -80,7 +80,7 @@ const darkTheme = {
     mentionBG: colors.blue600,
     ourMentionText: colors.green100,
     ourMentionBG: colors.green600,
-    tooltipHighlightBG: colors.green100,
+    tooltipHighlightBG: colors.green200,
     tooltipHighlightText: colors.green400,
     tooltipSupportingText: colors.productLight800,
     tooltipPrimaryText: colors.productLight900,

src/styles/theme/themes/light.ts

@@ -80,7 +80,7 @@ const lightTheme = {
     mentionBG: colors.blue100,
     ourMentionText: colors.green600,
     ourMentionBG: colors.green100,
-    tooltipHighlightBG: colors.green100,
+    tooltipHighlightBG: colors.green700,
     tooltipHighlightText: colors.green400,
     tooltipSupportingText: colors.productDark800,
     tooltipPrimaryText: colors.productDark900,

src/styles/utils/generators/TooltipStyleUtils/index.ts

@@ -21,6 +21,12 @@ const POINTER_HEIGHT = 4;
 /** The width of a tooltip pointer */
 const POINTER_WIDTH = 12;
 
+/** The height of a education tooltip pointer */
+const EDUCATION_POINTER_HEIGHT = 8;
+
+/** The width of a education tooltip pointer */
+const EDUCATION_POINTER_WIDTH = 16;
+
 type TooltipStyles = {
     rootWrapperStyle: ViewStyle;
     textStyle: TextStyle;
@@ -44,6 +50,7 @@ type TooltipParams = {
     wrapperStyle: StyleProp<ViewStyle>;
     anchorAlignment?: TooltipAnchorAlignment;
     shouldAddHorizontalPadding?: boolean;
+    isEducationTooltip?: boolean;
 };
 
 type TooltipAnimationProps = {
@@ -98,7 +105,10 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
         },
         wrapperStyle = {},
+        isEducationTooltip = false,
     }) => {
+        const pointerWidth = isEducationTooltip ? EDUCATION_POINTER_WIDTH : POINTER_WIDTH;
+        const pointerHeight = isEducationTooltip ? EDUCATION_POINTER_HEIGHT : POINTER_HEIGHT;
         const customWrapperStyle = StyleSheet.flatten(wrapperStyle);
         const tooltipVerticalPadding = spacing.pv1;
         const tooltipHorizontalPadding = shouldAddHorizontalPadding ? spacing.ph2.paddingHorizontal * 2 : 0;
@@ -128,7 +138,7 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             // we'll display it beneath its wrapped component rather than above it as usual.
             shouldShowBelow =
                 shouldForceRenderingBelow ||
-                yOffset - tooltipHeight - POINTER_HEIGHT < GUTTER_WIDTH + titleBarHeight ||
+                yOffset - tooltipHeight - pointerHeight < GUTTER_WIDTH + titleBarHeight ||
                 !!(tooltip && isOverlappingAtTop(tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight)) ||
                 anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP;
 
@@ -141,8 +151,8 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             // and shift it to left a bit if the tooltip is positioned on the extreme right.
             horizontalShiftPointer =
                 horizontalShift > 0
-                    ? Math.max(-horizontalShift, -(tooltipWidth / 2) + POINTER_WIDTH / 2 + variables.componentBorderRadiusSmall)
-                    : Math.min(-horizontalShift, tooltipWidth / 2 - POINTER_WIDTH / 2 - variables.componentBorderRadiusSmall);
+                    ? Math.max(-horizontalShift, -(tooltipWidth / 2) + pointerWidth / 2 + variables.componentBorderRadiusSmall)
+                    : Math.min(-horizontalShift, tooltipWidth / 2 - pointerWidth / 2 - variables.componentBorderRadiusSmall);
 
             // Because it uses fixed positioning, the top-left corner of the tooltip is aligned
             // with the top-left corner of the window by default.
@@ -154,9 +164,9 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             // To shift the tooltip up, we'll give `top` a negative value.
             rootWrapperTop = shouldShowBelow
                 ? // We need to shift the tooltip down below the component. So shift the tooltip down (+) by...
-                  yOffset + tooltipTargetHeight + POINTER_HEIGHT + manualShiftVertical
+                  yOffset + tooltipTargetHeight + pointerHeight + manualShiftVertical
                 : // We need to shift the tooltip up above the component. So shift the tooltip up (-) by...
-                  yOffset - (tooltipHeight + POINTER_HEIGHT) + manualShiftVertical;
+                  yOffset - (tooltipHeight + pointerHeight) + manualShiftVertical;
 
             // By default, the pointer's top-left will align with the top-left of the tooltip wrapper.
             //
@@ -166,7 +176,7 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             //
             //   OR if the pointer should be above the tooltip wrapper, then the pointer up (-) by the pointer's height
             //   so that the bottom of the pointer lines up with the top of the tooltip
-            pointerWrapperTop = shouldShowBelow ? -POINTER_HEIGHT : tooltipHeight;
+            pointerWrapperTop = shouldShowBelow ? -pointerHeight : tooltipHeight;
 
             // Horizontal tooltip position:
             // we will use xOffset to position the tooltip relative to the Wrapped Component
@@ -196,15 +206,15 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
             rootWrapperLeft = xOffset + horizontalShift + manualShiftHorizontal;
             switch (anchorAlignment.horizontal) {
                 case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
-                    pointerWrapperLeft = POINTER_WIDTH / 2;
+                    pointerWrapperLeft = pointerWidth / 2;
                     break;
                 case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT:
-                    pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth - POINTER_WIDTH * 1.5);
+                    pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth - pointerWidth * 1.5);
                     rootWrapperLeft += tooltipTargetWidth - tooltipWidth;
                     break;
                 case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER:
                 default:
-                    pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2);
+                    pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - pointerWidth / 2);
                     rootWrapperLeft += tooltipTargetWidth / 2 - tooltipWidth / 2;
             }
 
@@ -252,9 +262,9 @@ const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = (
                 height: 0,
                 backgroundColor: theme.transparent,
                 borderStyle: 'solid',
-                borderLeftWidth: POINTER_WIDTH / 2,
-                borderRightWidth: POINTER_WIDTH / 2,
-                borderTopWidth: POINTER_HEIGHT,
+                borderLeftWidth: pointerWidth / 2,
+                borderRightWidth: pointerWidth / 2,
+                borderTopWidth: pointerHeight,
                 borderLeftColor: theme.transparent,
                 borderRightColor: theme.transparent,
                 borderTopColor: customWrapperStyle.backgroundColor ?? theme.heading,