# @evo/tooltip

> Tooltip component

Latest version **0.4.0** (published 2019-11-10) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2019-11-10 |
| First published | 2018-05-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 126.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | s.shynkarenko |
| Maintainers | 041616, alexander, amostovenko, docccdev, hunson.abadeer, lequan, mark_tven, orhideous, sadkovoy, seedofjoy, tailhook, zemlanin |

## Links

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

## Dependencies (1)

- [react-popper](https://npm.io/package/react-popper.md) 1.3.3

## Recent versions

- 0.4.0 (latest) — 2019-11-10
- 0.3.3 — 2019-09-05
- 0.3.2 — 2019-08-19
- 0.3.1 — 2019-03-29
- 0.3.0 — 2018-11-14
- 0.1.8 — 2018-09-04
- 0.1.7 — 2018-08-13
- 0.1.6 — 2018-07-06
- 0.1.5 — 2018-06-06
- 0.1.4 — 2018-06-04
- 0.1.3 — 2018-05-29
- 0.1.2 — 2018-05-25

## README

# Tooltip

Компонент позволяет выводить подсказку (тултип) при ховере или клике на элемент.

## Usage

Пример:

```jsx
import Tooltip from '@evo/tooltip'
import tooltipStyle from '@evo/tooltip/dist/themeWhite.css'

const Example = () => (
	<Tooltip
		css={tooltipStyle}
		placement='right-start'
		content={<span>some text goes here</span>}
		isHover
	>
		reference element
	</Tooltip>
);
```

## Dependencies

В проекте, который будет использовать данный компонент, должны быть установлены следующие зависимости:

```json
"peerDependencies": {
    "classnames": "^2.2.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "prop-types": "^15.6.1",
    "react-onclickoutside": "^6.7.1"
},
```

## API

`Tooltip` компонент принимает в себя `css`, `content`, `placement`,
`isHover`, `isFixed`, `isVisible`, `stickToViewport`, `delay`

#### `css`

Используется для стилизирования компонента. Существует две темы `themeWhite` и `themeBlack`

Для подключения темы на проект:

```jsx
import tooltipStyle from '@evo/tooltip/dist/themeBlack.css'
...
<Tooltip
	css={tooltipStyle}
	...
>
	...
</Tooltip>
...
```
Подключение своих стилей:

```jsx
import tooltipStyle from 'path_to_your_styles.css'
...
<Tooltip
	css={tooltipStyle}
	...
>
	...
</Tooltip>
...
```

#### `content`

Собственно сам контент, может быть как текст так и React-компонент.

#### `placement`

Управляет позиционированием тултипа относительно элемента для которого вызван.
`placement` может быть как `top`, `right`, `bottom`, `left` так и с суфиксами `-start`, `-end`
чтобы прикрепить тултип к краю элемента относительно которого он вызывается.\
По умолчанию:
```js
placement='bottom'
```

#### `isHover`

Заставляет тултип показыватся при наведении.\
По умолчанию:
```js
isHover={false}
```

#### `isFixed`

Делает тултип `display: fixed`. По умолчанию тултип позиционируется абсолютно относительно родителя, но иногда нужно чтобы он позиционировался относительно **\<body\>**.\
По умолчанию:
```js
isFixed={false}
```

#### `isVisible`

Делает тултип видимым по умолчанию.\
По умолчанию:
```js
isVisible={false}
```

#### `stickToViewport`

Делает тултип максимально видимым пока reference-элемент находится в зоне видимости окна.\
По умолчанию:
```js
stickToViewport={false}
```

#### `delay`

Задержка для срабатывания **mouseLeave** при **isHover**.\
По умолчанию:
```js
delay={100}
```

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