# @eisgs/tooltip

> Компонент `` позволяет выводить подсказки рядом с элементами.

Latest version **2.2.1** (published 2023-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eisgs/tooltip
pnpm add @eisgs/tooltip
yarn add @eisgs/tooltip
bun add @eisgs/tooltip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2023-03-02 |
| First published | 2021-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | traidersu, krll_mdntsv, lzdyd |

## Links

- npm: https://www.npmjs.com/package/@eisgs/tooltip
- npm.io page: https://npm.io/package/@eisgs/tooltip

## Recent versions

- 2.2.1 (latest) — 2023-03-02
- 2.2.0 — 2022-11-07
- 2.1.2 — 2022-10-27
- 2.1.1 — 2022-06-02
- 2.1.0 — 2022-04-05
- 2.0.2 — 2022-02-24
- 2.0.1 — 2022-01-26
- 2.0.0 — 2021-12-29
- 1.0.1 — 2021-09-17
- 1.0.0 — 2021-08-16

## README

### Компонент Tooltip

Компонент `<Tooltip>` позволяет выводить подсказки рядом с элементами.

Содержимое `<Tooltip>` необходимо передать в параметре `tooltipContent`.

```jsx
import { Button } from '@eisgs/button';
import { Modal, useModal } from '@eisgs/modal';

const modal = useModal();

<>
  <Tooltip
    trigger="click"
    tooltipContent="Tooltip content"
    placement="bottomLeft"
  >
    <Button type="primary">
      Trigger: click
    </Button>
  </Tooltip>
  
  <br />

  <Tooltip
    trigger="hover"
    tooltipContent="Tooltip content"
    placement="bottomLeft"
  >
    <Button type="primary">
      Trigger: hover
    </Button>
  </Tooltip>
  
  <br />

  <Button 
    type="primary" 
    onClick={() => modal.open('tooltip-modal')}
  >
    Открыть модальное окно
  </Button>

  <Modal name="tooltip-modal">
    <Tooltip
      trigger="click"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
      zIndex={9999}
      enterDelay={0}
    >
      <Button type="primary">
        Trigger: click
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
      zIndex={9999}
      enterDelay={0}
    >
      <Button 
        type="primary"
        styles={{ marginTop: '10px' }}
      >
        Trigger: hover
      </Button>
    </Tooltip>
  </Modal>
</>
```

### Расположение

Расположение `<Tooltip>` доступно в следующих вариациях:

```jsx
import { Button } from '@eisgs/button';

const buttonWidth = '100px';

<>
  <div className="md-flex-row w300" style={{ marginLeft: '115px' }}>
    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="topLeft"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top Left
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="top"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="topRight"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top Right
      </Button>
    </Tooltip>
  </div>
  
  <br />

  <div className="md-flex-row w600">
    <div>
      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="leftTop"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left Top
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="left"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="leftBottom"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left Bottom
        </Button>
      </Tooltip>
    </div>

    <div>
      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="rightTop"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right Top
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="right"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="rightBottom"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right Bottom
        </Button>
      </Tooltip>
    </div>
  </div>
  
  <br />

  <div className="md-flex-row w300" style={{ marginLeft: '115px', marginTop: '10px' }}>
    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom Left
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottom"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomRight"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom Right
      </Button>
    </Tooltip>
  </div>
</>
```

### Обработчики открытия и закрытия

Обработчик `onOpen` вызывается при отображении подсказки, `onClose` при скрытии

```jsx
import { Button } from '@eisgs/button';
import { useState } from 'react';

const [isOpened, setIsOpened] = useState(false);

<Tooltip
  trigger="click"
  onOpen={() => setIsOpened(true)}
  onClose={() => setIsOpened(false)}
  placement="bottomLeft"
  tooltipContent="Подсказка"
>
  <Button>{`Подсказка ${isOpened ? 'отображается': 'скрыта'}`}</Button>
</Tooltip>
```

---
_Source: https://npm.io/package/@eisgs/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._