# @eisgs/hint

> Компонент принимает все пропсы от `@eisgs/tooltip` (является стилизованной версией `Tooltip`).

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

## Install

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

## 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 | 3.0.0 |
| Published | 2023-03-02 |
| First published | 2021-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | traidersu, krll_mdntsv, lzdyd |

## Links

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

## Dependencies (3)

- [@eisgs/tooltip](https://npm.io/package/@eisgs/tooltip.md) ^2.2.1
- [@eisgs/typography](https://npm.io/package/@eisgs/typography.md) ^1.3.1
- [@eisgs/theme-provider](https://npm.io/package/@eisgs/theme-provider.md) ^0.0.8

## Recent versions

- 3.0.0 (latest) — 2023-03-02
- 2.0.2 — 2022-11-07
- 2.0.1 — 2022-10-27
- 2.0.0 — 2022-07-19
- 1.2.2 — 2022-06-02
- 1.2.0 — 2022-04-05
- 1.1.2 — 2022-02-24
- 1.1.1 — 2022-01-26
- 1.1.0 — 2021-12-29
- 1.0.7 — 2021-09-17
- 1.0.6 — 2021-07-16
- 1.0.5 — 2021-06-07
- 1.0.4 — 2021-06-04
- 1.0.3 — 2021-06-01
- 1.0.2 — 2021-05-31
- … 1 more at https://npm.io/package/@eisgs/hint/versions

## README

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

Компонент принимает все пропсы от `@eisgs/tooltip` (является стилизованной версией `Tooltip`).

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

<Hint content="Подсказка">
  <Button>
    Подсказка
  </Button>
</Hint>
```

### Типы

Параметр `type` может иметь два значения - `light` (значение по умолчанию) и `dark`.

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

const styles = { marginBottom: 40 };
const types = ['light', 'dark'];

<div className="md-flex-row w300" style={{ flexWrap: 'wrap' }}>
  {types.map((type) => {
    const content = `Подсказка с type='${type}'`;
      
    return (
      <Hint
        key={type}
        content={content}
        containerStyles={styles}
        type={type}
      >
        <Button>
          {content}
        </Button>
      </Hint>
    );
  })}
</div>
```

### Варианты позиционирования

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

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

const gridStyles = { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridTemplateRows: 'repeat(5, 60px)', gridGap: 10 };
const buttonStyles = { width: '100%', height: '100%!important' };
const containerStyles = { height: '60px', minWidth: '100%' };

<div className="md-flex-row w700" style={gridStyles}>
  <Hint
    content="top Left content"
    placement="topLeft"
    containerStyles={{...containerStyles, gridColumn: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      top Left
    </Button>
  </Hint>

  <Hint
    content="top content"
    placement="top"
    containerStyles={containerStyles}
  >
    <Button 
      type="primary"
      styles={buttonStyles}
    >
      top
    </Button>
  </Hint>

  <Hint
    content="top Right content"
    placement="topRight"
    containerStyles={containerStyles}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      top Right
    </Button>
  </Hint>
    
  <Hint
    content="left Top content"
    placement="leftTop"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left Top
    </Button>
  </Hint>

  <Hint
    content="left content"
    placement="left"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 3}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left
    </Button>
  </Hint>

  <Hint
    content="left Bottom content"
    placement="leftBottom"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 4}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left Bottom
    </Button>
  </Hint>

  <Hint
    content="right Top content"
    placement="rightTop"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right Top
    </Button>
  </Hint>

  <Hint
    content="right content"
    placement="right"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 3}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right
    </Button>
  </Hint>

  <Hint
    content="right Bottom content"
    placement="rightBottom"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 4}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right Bottom
    </Button>
  </Hint>
  
  <Hint
    content="bottom Left content"
    placement="bottomLeft"
    containerStyles={{...containerStyles, gridColumn: 2, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom Left
    </Button>
  </Hint>

  <Hint
    content="bottom content"
    placement="bottom"
    containerStyles={{...containerStyles, gridColumn: 3, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom
    </Button>
  </Hint>

  <Hint
    content="bottom Right content"
    placement="bottomRight"
    containerStyles={{...containerStyles, gridColumn: 4, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom Right
    </Button>
  </Hint>
</div>
```

### Отступы

Доступны три значения для параметра `arrowOffset` - `8` (значение по умолчанию для `igs`), `16` (значение по умолчанию для `eisgs`) и `32` (может быть только при `type="light"`).

Значение `arrowOffset` соответствует отступу контента подсказки:

 - `8` (`8px` вертикальный отступ, `12px` горизонтальный отступ);

 - `16` (`16px` вертикальный и горизонтальный отступ);

 - `32` (`32px` вертикальный и горизонтальный отступ);

При установленной теме `igs` меняется значение `borderRadius` - `4` (значение по умолчанию) и `8` (при `arrowOffset="32"`)

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

const containerStyles = { marginBottom: 40 };

<>
  <Hint
    content="Обычная подсказка"
    placement="topLeft"
    containerStyles={containerStyles}
  >
    <Button>
      Обычная подсказка
    </Button>
  </Hint>

  <Hint 
    placement="topLeft"
    maxWidth={424}
    arrowOffset={32}
    content={
      <>
        <Typography type="p2" weight="bold" styles="margin-bottom: 12px">Вариант 1</Typography>
        <Typography type="p2" styles="margin-bottom: 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suscipit tellus malesuada viverra a enim, eget nisl leo. Et nulla consectetur netus commodo aliquet eu turpis nunc.</Typography>
        <Typography type="p2" weight="bold" styles="margin-bottom: 12px">Вариант 2</Typography>
        <Typography type="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suscipit tellus malesuada viverra a enim, eget nisl leo. Et nulla consectetur netus commodo aliquet eu turpis nunc.</Typography>
      </>
    }
  >
    <Button>
      Подсказка с arrowOffset='32'
    </Button>
  </Hint>
</>
```

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