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'
```

## Инициализация

Перед использованием нужно настроить [Portal](/docs/components/Portal)

## Использование

- content: скрытая часть, может быть string или jsx
- children: видимая часть

## Простой пример

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

## Тултип с нажимаемыми элементами

Если нужно обернуть нажимаемый элемент в тултип в мобильном приложении, свойство `onPress` должно быть в верхнем компоненте

❌ неверно

```jsx
<Tooltip content='Текст подсказка'>
  <View>
    <Button onPress={onPressHandler}>Кнопка</Button>
  </View>
</Tooltip>
```

✅ верно

```jsx
<Tooltip content='Текст подсказка'>
  <Button onPress={onPressHandler}>Кнопка</Button>
</Tooltip>
```

## Пример с кнопкой

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

const content = 'Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения новых предложений'

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

## Стилизация

- style: изменяет стили children (заголовка)
- contentStyle: изменяет стили скрытого контента