<!-- Web specific usage which is to be displayed on the documentation and not added as comment in the component. -->

---

> **Web-platform specific note**:
>
> You **must** pass a valid React Native [`Modal`](https://reactnative.dev/docs/modal) component implementation
> into [`ModalComponent`](#modalcomponent) prop because `Modal` component is not implemented yet in `react-native-web`

```js
...
import Modal from 'modal-react-native-web';

...

<Tooltip ModalComponent={Modal} ... />
...
```

```SnackPlayer name=RNE Tooltip
import React from 'react';
import { Tooltip, Text, lightColors } from '@rneui/themed';
import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';

const { height } = Dimensions.get('window');

type ToolTipComponentProps = {};

const TooltipComponent: React.FunctionComponent<ToolTipComponentProps> = () => {
const toolProps = {};
return (
  <>
    <ScrollView>
      <View style={{ marginVertical: height / 8 }}>
        <View style={styles.view}>
          <Tooltip
            popover={<Text>no caret!</Text>}
            withPointer={false}
          >
            <Text>without caret</Text>
          </Tooltip>
          <Tooltip
            popover={<Text>Tooltip info goes here</Text>}
            width={200}
            backgroundColor={lightColors.primary}
          >
            <Text>Press me</Text>
          </Tooltip>
        </View>
        <View style={styles.view}>
          <Tooltip
            backgroundColor={lightColors.secondary}
            popover={
              <Text>Tooltip info goes here too. Find tooltip everywhere</Text>
            }
            containerStyle={{ width: 200, height: 60 }}
          >
            <Text>Press me</Text>
          </Tooltip>
          <Tooltip
            containerStyle={{ width: 145, height: 130 }}
            popover={
              <Text>
                {
                  'Some big text full of important stuff for the super duper user that our design has been created for'
                }
              </Text>
            }
          >
            <Text>HUGE</Text>
          </Tooltip>
        </View>
        <View style={styles.view}>
          <Tooltip
            width={200}
            backgroundColor={lightColors.primary1}
            popover={<Text>Tooltip info goes here</Text>}
          >
            <Text>More attention</Text>
          </Tooltip>
        </View>
        <View style={styles.view}>
          <Tooltip
            width={200}
            backgroundColor={lightColors.primary2}
            popover={<Text>Tooltip info goes here</Text>}
          >
            <Text>I'm different</Text>
          </Tooltip>
          <Tooltip
            width={200}
            popover={<Text>Tooltip info goes here</Text>}
          >
            <Text>Press me</Text>
          </Tooltip>
        </View>
      </View>
    </ScrollView>
  </>
);
};

const styles = StyleSheet.create({
view: {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-evenly',
  marginVertical: 50,
},
});

export default TooltipComponent;
```
