@evo/tooltip

0.4.0 • Public • Published

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>.
По умолчанию:

isFixed={false}

isVisible

Делает тултип видимым по умолчанию.
По умолчанию:

isVisible={false}

stickToViewport

Делает тултип максимально видимым пока reference-элемент находится в зоне видимости окна.
По умолчанию:

stickToViewport={false}

delay

Задержка для срабатывания mouseLeave при isHover.
По умолчанию:

delay={100}

Readme

Keywords

none

Package Sidebar

Install

npm i @evo/tooltip

Weekly Downloads

61

Version

0.4.0

License

ISC

Unpacked Size

130 kB

Total Files

14

Last publish

Collaborators

  • stoyanovk
  • lequan
  • zemlanin
  • alexander
  • seedofjoy
  • 041616
  • docccdev
  • orhideous
  • tailhook
  • hunson.abadeer
  • mark_tven
  • amostovenko
  • sadkovoy
  • himiranov
  • evo-kazymyrov