feat: Add Tooltip component

* featute(tooltip): first proposal

* feat(tooltip): add documentation

* fix(tooltip): improve props

* fix(tooltip-doc): alphabetical order

* feat(website): add tooltip component

* fix(review): improve code

* feat(tooltip): first tests

* Run prettier on markdown

* fix(helpers): remove flow

* fix(tooltip): update snaps

docs/tooltip.md

@@ -0,0 +1,158 @@
+---
+id: tooltip
+title: Tooltip
+---
+
+Easy to use and customisable tooltip.
+
+<img alt="tooltip example gif" width='290' src='/react-native-elements/img/tooltipExample.gif'>
+
+### Usage
+
+```js
+import { Tooltip, Text } from 'react-native-elements';
+
+...
+
+<Tooltip popover={<Text>Info here</Text>}>
+  <Text>Press me</Text>
+</Tooltip>
+```
+
+### Props
+
+* [`backgroundColor`](#backgroundcolor)
+* [`containerStyle`](#containerStyle)
+* [`height`](#height)
+* [`highlightColor`](#highlightColor)
+* [`onClose`](#onClose)
+* [`onOpen`](#onOpen)
+* [`pointerColor`](#pointerColor)
+* [`popover`](#popover)
+* [`toggleOnPress`](#toggleOnPress)
+* [`width`](#width)
+* [`withOverlay`](#withOverlay)
+* [`withPointer`](#withPointer)
+
+---
+
+# Reference
+
+### `backgroundColor`
+
+sets backgroundColor of the tooltip and pointer.
+
+|  Type  | Default |
+| :----: | :-----: |
+| string | #617080 |
+
+---
+
+### `containerStyle`
+
+Passes style object to tooltip container
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `height`
+
+Tooltip container height. Necessary in order to render the container in the
+correct place. Pass height according to the size of the content rendered inside
+the container.
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |   40    |
+
+---
+
+### `highlightColor`
+
+Color to highlight the item the tooltip is surrounding.
+
+|  Type  |   Default   |
+| :----: | :---------: |
+| string | transparent |
+
+---
+
+### `onClose`
+
+function which gets called on closing the tooltip.
+
+|   Type   | Default  |
+| :------: | :------: |
+| function | () => {} |
+
+---
+
+### `onOpen`
+
+function which gets called on opening the tooltip.
+
+|   Type   | Default  |
+| :------: | :------: |
+| function | () => {} |
+
+---
+
+### `pointerColor`
+
+Color of tooltip pointer, it defaults to the
+[`backgroundColor`](#backgroundcolor) if none is passed .
+
+|  Type  |                Default                |
+| :----: | :-----------------------------------: |
+| string | [`backgroundColor`](#backgroundcolor) |
+
+---
+
+### `popover`
+
+Component to be rendered as the display container.
+
+|     Type      | Default |
+| :-----------: | :-----: |
+| React.Element |  null   |
+
+---
+
+### `toggleOnPress`
+
+Flag to determine to toggle or not the tooltip on press.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |
+
+---
+
+### `width`
+
+Tooltip container width. Necessary in order to render the container in the
+correct place. Pass height according to the size of the content rendered inside
+the container.
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |   150   |
+
+### `withOverlay`
+
+Flag to determine whether or not dislay overlay shadow when tooltip is open.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |
+
+### `withPointer`
+
+Flag to determine whether or not dislay pointer.
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  true   |

src/helpers/index.js

@@ -1,6 +1,20 @@
+import { Platform, Dimensions } from 'react-native';
 import renderNode from './renderNode';
 import getIconType from './getIconType';
 import normalizeText from './normalizeText';
 import nodeType from './nodeType';
 
-export { renderNode, getIconType, normalizeText, nodeType };
+const Screen = Dimensions.get('window');
+const ScreenWidth = Screen.width;
+const ScreenHeight = Screen.height;
+const isIOS = Platform.OS === 'ios';
+
+export {
+  renderNode,
+  getIconType,
+  normalizeText,
+  nodeType,
+  ScreenWidth,
+  ScreenHeight,
+  isIOS,
+};

src/index.d.ts

@@ -1306,6 +1306,75 @@ export interface SearchBarBase extends TextInputProperties {
   onChangeText?(text: string): void;
 }
 
+export interface TooltipProps {
+
+  /**
+   * sets backgroundColor of the tooltip and pointer.
+   */
+  backgroundColor?: string;
+
+  /**
+   * Color to highlight the item the tooltip is surrounding.
+   */
+  highlightColor?: string;
+
+  /**
+   * function which gets called on closing the tooltip.
+   */
+  onClose?(): void;
+
+  /**
+   * function which gets called on opening the tooltip.
+   */
+  onOpen?(): void;
+
+  /**
+   * Color of tooltip pointer, it defaults to the backgroundColor if none passed .
+   */
+  pointerColor?: string;
+
+  /**
+   * Flag to determine to toggle or not the tooltip on press.
+   */
+  toggleOnPress?(): void;
+
+  /**
+   * Component to be rendered as the display container.
+   */
+  popover?: React.ReactElement<{}>;
+
+  /**
+   * Passes style object to tooltip container
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Tooltip container height. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.
+   * @default 40
+   */
+  height?: number;
+
+  /**
+   * Tooltip container width. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.
+   * @default 150
+   */
+  width?: number;
+
+  /**
+   *  Flag to determine whether or not dislay overlay shadow when tooltip is open.
+   * 
+   * @default true
+  */
+  withOverlay?: boolean;
+
+  /**
+   * Flag to determine whether or not dislay pointer.
+   */
+  withPointer?: boolean;
+}
+
+export class Tooltip extends React.Component<TooltipProps, any> {}
+
 export interface SearchBarDefault extends SearchBarBase {
   /**
    * Change theme to light theme

src/index.js

@@ -27,6 +27,7 @@ import Avatar from './avatar/Avatar';
 import Rating from './rating/Rating';
 import Header from './header/Header';
 import PricingCard from './pricing/PricingCard';
+import Tooltip from './tooltip/Tooltip';
 
 // helpers
 import Text from './text/Text';
@@ -42,6 +43,7 @@ export {
   Input,
   ListItem,
   PricingCard,
+  Tooltip,
   SocialIcon,
   Text,
   Divider,