[IOPID-2426] Tooltip component

[ChrisMattew]

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
tooltips-demo.mp4	android-tooltip.mp4

A11Y iOS	A11Y Android
a11y-iOS-tooltip.MP4	a11y-android-tooltip.mp4

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

[thisisjp]

Awesome! Why don't we add a very subtle fade in \ fade out transition to gently darken the background? @dmnplb

[dmnplb]

As @thisisjp rightly points out, the component feels a bit static in terms of interaction: we could improve both the background and the entry/exit transitions. But I also want to be pragmatic: I think that the first iteration is good enough to release.

Let's not forget that this component is special because it needs to handle different placements and device configurations, so we should integrate it into the main app as soon as possible to do the appropriate viability tests before making any other improvements.

So, in short: LGTM, but let's plan the following refinements:

• Background and entry/exit smooth transitions, ideally made with reanimated
• Dark mode support by using the appropriate theme keys

[Ladirico]

LGTM!