@evo/tooltip NPM

Tooltip

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

Usage

Пример:

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

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

"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

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

import tooltipStyle from '@evo/tooltip/dist/themeBlack.css'
...
<Tooltip
	css={tooltipStyle}
	...
>
	...
</Tooltip>
...

Подключение своих стилей:

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

`content`

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

`placement`

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

placement='bottom'

`isHover`

Заставляет тултип показыватся при наведении.\ По умолчанию:

isHover={false}

`isFixed`

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