import { useState } from 'react'
import { Text, View } from 'react-native'
import Alert from '../Alert'
import Button from '../Button'
import Row from '../Row'
import Span from '../typography/Span'
import Div from '../Div'
import Tooltip from './'

# Tooltip (deprecated)

```jsx
import { Tooltip } from '@startupjs/ui'
```

## Initialization

Before use you need to configure [Portal](/docs/components/Portal)

## Usage

- content: hidden part, can be string or jsx
- children: visible part

## Simple example

```jsx example
return (
  <Row>
    <Tooltip content="tooltip">
      <Span>Content</Span>
    </Tooltip>
  </Row>
)
```

## Tooltip with pressable elements

If you need to wrap a pressable element in a tooltip in a mobile app, the `onPress` property must be in the top component of children

❌ wrong

```jsx
<Tooltip content='Some content'>
  <View>
    <Button onPress={onPressHandler}>Button</Button>
  </View>
</Tooltip>
```

✅ right

```jsx
<Tooltip content='Some content'>
  <Button onPress={onPressHandler}>Button</Button>
</Tooltip>
```

## Example with Button

```jsx example
const [isClick, setIsClick] = useState(false)

const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'

return (
  <View>
    <Tooltip content={content}>
      <Button onPress={() => setIsClick(true)}>Button</Button>
    </Tooltip>
    {!!isClick && (
      <Div style={{ marginTop: 8 }}>
        <Alert
          variant='success'
          onClose={()=> setIsClick(false)}
        >
          onPress event
        </Alert>
      </Div>
    )}
  </View>
)
```

## Stylization

- style: changes the styles of children (header)
- contentStyle: changes the styles of hidden content