[IOPID-2426] Tooltip component (#351)

## Short description
This PR adds the `Tooltip` component

## List of changes proposed in this pull request
- Created `Tooltip` component
- Added `Tooltips` screen in the Example app to show the `Tooltip`
behaviors
## Demo
|iOS|Android|
|----|-------|
|<video
src="https://github.com/user-attachments/assets/1060426b-0ec6-4340-b029-6fcdf07cfe10"></video>|<video
src="https://github.com/user-attachments/assets/8a76daf8-687c-498e-a54d-ca161fb4a5d0"></video>|

|A11Y iOS|A11Y Android|
|----|-------|
|<video
src="https://github.com/user-attachments/assets/a03ee6be-5575-4634-a18a-35079ffa9f08"></video>|<video
src="https://github.com/user-attachments/assets/2043f05a-6543-42f5-be14-cb091362e87f"></video>|

>[!Important]
> The `left` and `right` positions are calculated after the component is
rendered. This implementation causes a minor glitch where the Tooltip
repositions itself to achieve a centered alignment relative to the
enclosing element.
> To avoid this behavior, the opacity value of the component depends on
the parameters returned by the `onLayout` prop. Once the `tooltipLayout`
is defined, the opacity is set to a value of 1.

## How to test
Run the example app and test the `Tooltip` different implementations

---------

Co-authored-by: Damiano Plebani <[email protected]>
Co-authored-by: Alice Di Rico <[email protected]>

example/src/navigation/navigator.tsx

@@ -55,6 +55,7 @@ import { TabNavigationScreen } from "../pages/TabNavigation";
 import { TextInputs } from "../pages/TextInputs";
 import { Toasts } from "../pages/Toasts";
 import { Typography } from "../pages/Typography";
+import Tooltips from '../pages/Tooltips';
 import { AppParamsList } from "./params";
 import APP_ROUTES from "./routes";
 
@@ -426,6 +427,13 @@ const AppNavigator = () => {
               headerTitle: APP_ROUTES.COMPONENTS.TOASTS.title
             }}
           />
+          <Stack.Screen
+            name={APP_ROUTES.COMPONENTS.TOOLTIPS.route}
+            component={Tooltips}
+            options={{
+              headerTitle: APP_ROUTES.COMPONENTS.TOOLTIPS.title
+            }}
+          />
 
           <Stack.Screen
             name={APP_ROUTES.COMPONENTS.SEARCH_INPUT.route}

example/src/navigation/params.ts

@@ -45,6 +45,7 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLLVIEW.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.COMPONENTS.TOOLTIPS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL_2.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.SEARCH.route]: undefined;

example/src/navigation/routes.ts

@@ -66,6 +66,10 @@ const APP_ROUTES = {
     TOASTS: {
       route: "DESIGN_SYSTEM_TOASTS",
       title: "Toasts"
+    },
+    TOOLTIPS: {
+      route: "DESIGN_SYSTEM_TOOLTIPS",
+      title: "Tooltips"
     }
   },
   SCREENS: {

example/src/pages/Tooltips.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { ButtonSolid, IOVisualCostants, Tooltip, VSpacer } from '@pagopa/io-app-design-system';
+import { View } from 'react-native';
+import { Screen } from '../components/Screen';
+
+const Tooltips = () => {
+  const [isTopVisible, setIsTopVisible] = useState(false);
+  const [isBottomVisible, setIsBottomVisible] = useState(false);
+  const [isRightVisible, setIsRightVisible] = useState(false);
+  const [isLeftVisible, setIsLeftVisible] = useState(false);
+  const [isTopLeftVisible, setIsTopLefttVisible] = useState(false);
+  const [isBottomRightVisible, setIsBottomRighttVisible] = useState(false);
+
+  return (
+    <Screen>
+      <View style={{ paddingVertical: IOVisualCostants.appMarginDefault }}>
+        <Tooltip
+          placement='bottom'
+          title='Bottom Tooltip'
+          content='Some bottom tooltip content'
+          isVisible={isBottomVisible}
+          onClose={() => setIsBottomVisible(false)}
+          closeIconAccessibilityLabel=''
+        >
+          <ButtonSolid fullWidth label='Bottom' onPress={() => setIsBottomVisible(true)} />
+        </Tooltip>
+        <VSpacer />
+
+        <Tooltip
+          isVisible={isTopVisible}
+          title='Top Tooltip'
+          content='Some top tooltip content'
+          onClose={() => setIsTopVisible(false)}
+          closeIconAccessibilityLabel=''
+        >
+          <ButtonSolid fullWidth label='Top' onPress={() => setIsTopVisible(true)} />
+        </Tooltip>
+        <VSpacer />
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Tooltip
+            placement='right'
+            isVisible={isRightVisible}
+            title='Right Tooltip'
+            content='Some right tooltip content'
+            onClose={() => setIsRightVisible(false)}
+            closeIconAccessibilityLabel=''
+          >
+            <ButtonSolid fullWidth label='Right' onPress={() => setIsRightVisible(true)} />
+          </Tooltip>
+          <Tooltip
+            placement='left'
+            isVisible={isLeftVisible}
+            title='Left Tooltip'
+            content='Some left tooltip content'
+            onClose={() => setIsLeftVisible(false)}
+            closeIconAccessibilityLabel=''
+          >
+            <ButtonSolid fullWidth label='Left' onPress={() => setIsLeftVisible(true)} />
+          </Tooltip>
+        </View>
+        <VSpacer />
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Tooltip
+            placement='top'
+            isVisible={isTopLeftVisible}
+            title='Top Tooltip'
+            content='Some top tooltip content'
+            onClose={() => setIsTopLefttVisible(false)}
+            closeIconAccessibilityLabel=''
+          >
+            <ButtonSolid fullWidth label='Top' onPress={() => setIsTopLefttVisible(true)} />
+          </Tooltip>
+          <Tooltip
+            placement='bottom'
+            isVisible={isBottomRightVisible}
+            title='Bottom Tooltip'
+            content='Some bottom tooltip content'
+            onClose={() => setIsBottomRighttVisible(false)}
+            closeIconAccessibilityLabel=''
+          >
+            <ButtonSolid fullWidth label='Bottom' onPress={() => setIsBottomRighttVisible(true)} />
+          </Tooltip>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default Tooltips;